React中10种Hook的使用方法

本篇文章给大家分享的是有关React中10种Hook的使用方法，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

React Hook是什么？

React官网是这么介绍的： Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

完全可选的 你无需重写任何已有代码就可以在一些组件中尝试 Hook。但是如果你不想，你不必现在就去学习或使用 Hook。

100% 向后兼容的 Hook 不包含任何破坏性改动。

现在可用 Hook 已发布于 v16.8.0。

没有计划从 React 中移除 class 你可以在本页底部的章节读到更多关于 Hook 的渐进策略。

Hook 不会影响你对 React 概念的理解 恰恰相反，Hook 为已知的 React 概念提供了更直接的 API：props， state，context，refs 以及生命周期。稍后我们将看到，Hook 还提供了一种更强大的方式来组合他们。

如果对react还不够了解建议先看下react官方文档，写写demo再来看文章，因为有的react基础的东西我就一笔带过不细说。
react 官方文档 https://zh-hans.reactjs.org/docs/hooks-state.html

React目前提供的Hook

1.useState

import React from 'react'; import './App.css'; //通常的class写法,改变状态 class App extends React.Component {   constructor(props){     super(props)     this.state = {       hook:'react hook 是真的好用啊'     }   }   changehook = () => {     this.setState({       hook:'我改变了react hook 的值'     })   }   render () {     const { hook } = this.state     return(          <header className="App-header">           {hook}           <button onClick={this.changehook}>             改变hook           </button>         </header>       )   } } export  {App} //函数式写法,改变状态 function App() { //创建了一个叫hook的变量，sethook方法可以改变这个变量,初始值为‘react hook 是真的好用啊'  const [hook, sethook] = useState("react hook 是真的好用啊");   return (      <header className="App-header">       {hook}{/**这里的变量和方法也是可以直接使用的 */}       <button onClick={() => sethook("我改变了react hook 的值")}>         改变hook       </button>     </header>   ); } export  {App} //箭头函数的函数写法,改变状态 export const App = props => {   const [hook, sethook] = useState("react hook 是真的好用啊");   return (     <header className="App-header">       {hook}       <button onClick={() => sethook("我改变了react hook 的值")}>         改变hook       </button>     </header>   ); };

使用方法备注在上面的demo中
看完上面useState的对比使用，一个小的demo结构更清晰，代码更简洁，更像写js代码，运用到项目中，那岂不是美滋滋。

2.useEffect & useLayoutEffect

useEffect代替原来的生命周期，componentDidMount，componentDidUpdate 和 componentWillUnmount 的合并版
useEffect( ()=>{ return ()=>{ } } , [ ])

• 第一个参数，是函数，默认第一次渲染和更新时都会触发，默认自带一个return ，return一个函数表示可以再销毁之前可以处理些事情

• 第二个参数，数组【】，空的时候表示只执行一次，更新时不触发，里面的参数是什么，当参数变化时才会执行useEffect

• useEffect可以多次使用，按照先后顺序执行

• useLayoutEffect 强制useeffect的执行为同步，并且先执行useLayoutEffect内部的函数

import React, { useState, useEffect, useLayoutEffect } from 'react'; //箭头函数的写法，改变状态 const UseEffect = (props) => {  //创建了一个叫hook的变量，sethook方法可以改变这个变量,初始值为‘react hook 是真的好用啊'  const [ hook, sethook ] = useState('react hook 是真的好用啊');  const [ name ] = useState('baby张');  return (   <header className="UseEffect-header">    <h4>UseEffect</h4>    <Child hook={hook} name={name} />    {/**上面的变量和下面方法也是可以直接使用的 */}    <button onClick={() => sethook('我改变了react hook 的值' + new Date().getTime())}>改变hook</button>   </header>  ); }; const Child = (props) => {  const [ newhook, setnewhook ] = useState(props.hook);  //这样写可以代替以前的componentDidMount，第二个参数为空数组，表示该useEffect只执行一次  useEffect(() => {   console.log('first componentDidMount');  }, []);  //第二个参数，数组里是hook,当hook变化时，useEffect会触发，当hook变化时，先销毁再执行第一个函数。  useEffect(   () => {    setnewhook(props.hook + '222222222');    console.log('useEffect');    return () => {     console.log('componentWillUnmount ');    };   },   [ props.hook ]  );  //useLayoutEffect 强制useeffect的执行为同步，并且先执行useLayoutEffect内部的函数  useLayoutEffect(   () => {    console.log('useLayoutEffect');    return () => {     console.log('useLayoutEffect componentWillUnmount');    };   },   [ props.hook ]  );  return (   <div>    <p>{props.name}</p>    {newhook}   </div>  ); }; export default UseEffect;

3.useMemo & useCallback

他们都可以用来优化子组件的渲染问题，或者监听子组件状态变化来处理事件，这一点在以前是很难做到的，因为shouldComponentUpdate 里能监听到是否变化，但没法控制其他的外部方法，只能返回true和false,而componentDidUpdate只能在更新后执行，所以想在渲染之前做些事情就不好搞了。
useCallback目前还不能用

import React, { useState, useMemo } from 'react'; const Child = ({ age, name, children }) => {     //在不用useMemo做处理的时候，只要父组件状态改变了，子组件都会渲染一次，用了useMemo可以监听某个状态name，当name变化时候执行useMemo里第一个函数     console.log(age, name, children, '11111111');  function namechange() {   console.log(age, name, children, '22222222');   return name + 'change';     }      {/** react 官网虽说useCallback与useMemo的功能差不多，但不知道版本问题还怎么回是，这个方法目前还不能用     const memoizedCallback = useCallback(         () => {             console.log('useCallback')         },         [name],       );     console.log(memoizedCallback,'memoizedCallback')      */}     //useMemo有两个参数，和useEffect一样，第一个参数是函数，第二个参数是个数组，用来监听某个状态不变化  const changedname = useMemo(() => namechange(), [ name ]);  return (   <div style={{ border: '1px solid' }}>    <p>children：{children}</p>    <p>name：{name}</p>    <p>changed：{changedname}</p>    <p>age：{age}</p>   </div>  ); }; const UseMemo = () => {     //useState 设置名字和年龄，并用2两个按钮改变他们，传给Child组件  const [ name, setname ] = useState('baby张');   const [ age, setage ] = useState(18);  return (   <div>    <button     onClick={() => {      setname('baby张' + new Date().getTime());      }}    >     改名字    </button>    <button     onClick={() => {      setage('年龄' + new Date().getTime());     }}    >     改年龄    </button>    <p>     UseMemo {name}：{age}    </p>    <Child age={age} name={name}>     {name}的children    </Child>   </div>  ); }; export default UseMemo;

4.useRef

ref跟之前差不多，useRef创建–绑定–使用，三步走，详细看代码以及备注

import React, { useState, useRef } from 'react'; const UseRef = () => {  //这里useState绑定个input,关联一个状态name  const [ name, setname ] = useState('baby张');  const refvalue = useRef(null);// 先创建一个空的useRef  function addRef() {   refvalue.current.value = name;   //点击按钮时候给这个ref赋值   // refvalue.current = name  //这样写时，即使ref没有绑定在dom上，值依然会存在创建的ref上，并且可以使用它   console.log(refvalue.current.value);  }  return (   <div>             <input                 defaultValue={name}     onChange={(e) => {      setname(e.target.value);                 }}    />    <button onClick={addRef}>给下面插入名字</button>    <p>给我个UseRef名字：</p>    <input ref={refvalue} />   </div>  ); }; export default UseRef;

5.useContext

之前使用过context的小伙伴一看就懂，useContext的话跟之前的context基本用法差不多，代码内有详细注释说明，创建，传值，使用

import React, { useState, useContext, createContext } from 'react'; const ContextName = createContext(); //这里为了方便写博客，爷爷孙子组件都写在一个文件里，正常需要在爷爷组件和孙子组件挨个引入创建的Context const UseContext = () => {  //这里useState创建一个状态，并按钮控制变化  const [ name, setname ] = useState('baby张');  return (   <div>    <h4>UseContext 爷爷</h4>    <button     onClick={() => {      setname('baby张' + new Date().getTime());     }}    >     改变名字    </button>    {/**这里跟context用法一样，需要provider向子组件传递value值，value不一定是一个参数 */}}    <ContextName.Provider value={{ name: name, age: 18 }}>     {/**需要用到变量的子组件一定要写在provider中间，才能实现共享 */}     <Child />    </ContextName.Provider>   </div>  ); }; const Child = () => {  //创建一个儿子组件，里面引入孙子组件  return (   <div style={{ border: '1px solid' }}>    Child 儿子    <ChildChild />   </div>  ); }; const ChildChild = () => {  //创建孙子组件，接受爷爷组件的状态，用useContext,获取到爷爷组件创建的ContextName的value值  let childname = useContext(ContextName);  return (   <div style={{ border: '1px solid' }}>    ChildChild 孙子    <p>     {childname.name}:{childname.age}    </p>   </div>  ); }; export default UseContext;

6.useReducer

这里的usereducer会返回state和dispatch,通过context传递到子组件，然后直接调用state或者触发reducer，我们常用useReducer 与useContext createContext一起用，模拟reudx的传值和重新赋值操作。

import React, { useState, useReducer, useContext, createContext } from 'react'; //初始化stroe的类型、初始化值、创建reducer const ADD_COUNTER = 'ADD_COUNTER'; const initReducer = {  count: 0 }; //正常的reducer编写 function reducer(state, action) {  switch (action.type) {   case ADD_COUNTER:    return { ...state, count: state.count + 1 };   default:    return state;  } } const CountContext = createContext(); //上面这一段，初始化state和reducer创建context,可以单独写一个文件，这里为了方便理解，放一个文件里写了 const UseReducer = () => {  const [ name, setname ] = useState('baby张');  //父组件里使用useReducer,第一个参数是reducer函数，第二个参数是state，返回的是state和dispash  const [ state, dispatch ] = useReducer(reducer, initReducer);  return (   <div>    UseReducer    {/* 在这里通过context，讲reducer和state传递给子组件*/}    <CountContext.Provider value={{ state, dispatch, name, setname }}>     <Child />    </CountContext.Provider>   </div>  ); }; const Child = () => {  //跟正常的接受context一样，接受父组件的值，通过事件等方式触发reducer，实现redux效果  const { state, dispatch, name, setname } = useContext(CountContext);  function handleclick(count) {   dispatch({ type: ADD_COUNTER, count: 17 });   setname(count % 2 == 0 ? 'babybrother' : 'baby张');  }  return (   <div>    <p>     {name}今年{state.count}岁    </p>    <button onClick={() => handleclick(state.count)}>长大了</button>   </div>  ); }; export default UseReducer;

附上github地址 10个hook demo 点一点star，

以上就是React中10种Hook的使用方法，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。