【工作日记】React hooks简介及常用hooks小结

今天是我去实习的第二天，也是第一次尝试正式使用react进行项目开发。项目中遇到了很多使用hooks的地方，在状态管理上起到了显著的作用。于是我今天便总结了常用的hooks，希望能分享给大家。

一、为什么要使用hooks

在介绍hooks之前，我们先介绍一下react的两种组件类型。一种是函数组件，一种是类组件。而且对于项目开发来说，组件不应成为大型的数据容器，而最好只将其构建为react单项数据流的管道。因此，最好的react组件编写方式是函数，而不是类。

不过，大多数的函数组件都是纯函数，而纯函数也存在相当多的局限性：

①纯组件没有状态

②纯组件没有声明周期钩子函数

③纯组件没有this

这也意味着，当我们需要用到状态的切换和传递时，必须要使用类组件或者redux进行状态管理，而二者都是相当繁琐的代码，很难进行拆分和重构。为了在纯组件中使用状态，我们引入了hooks。

二、hooks简介

hooks单词的本义是“钩子”，意思是组件尽量使用成纯函数，如果需要外部功能或者方法，那就用钩子将其钩进来。

三、常用hooks小结

1.useState()：状态钩子

useState用于为函数组件引入状态。

const [num,setNum] = useState(1)

这句代码定义了一个num变量，设定了其初始值为1，并提供了改变其状态的serNum()方法。

<div onClick={()=>setNum(2)}></div>

2.useContext()：共享状态钩子

如果一个父组件有两个子组件，现在这两个组件之间需要共享状态，就可以使用useContext。

例如：

const Context = React.creactContext()

<Context.Provider value={{username:'nuotian'}}>
    <div>
        <CompenonentA />
        <CompenonentB />
    </div>
</Context.Provider>

这样，ComponentA和ComponentB中就可以使用username了

const ComponentA = ()=>{
  const {username} = useContext(Context);
  return (<div>{username}</div>)
}

3.useReducer()：action钩子

hooks中的useReducer相当于redux中的action。

const myReducer = (state,action)=>{
    if(type==='countUp'){count+=1 ;return count;}
}

function App(){
  const [state , dispatch] = useReducer(myReducer , {count : 0 });
  return (<div onClick={()=>dispatch({ type : 'countUp' })}>{{state.count}}</div>)
}

4.useEffect()：副作用钩子

useEffect在组件完成挂载后执行。

useEffect有两个参数，第一个是参数是一个函数，是在函数完成挂载后执行的函数。第二个参数为一个数组，控制函数的执行。函数只有在数组中的元素发生变化后才会执行。没有第二个参数时，每次render都会执行该函数。

useEffect(()=>{alert(`${props.name}`)},[props.name])

5.useCallback()：回调函数钩子

useCallback有两个参数，第一个是参数是一个函数，即执行完成返回的函数。第二个参数为一个数组，控制函数是否重新渲染。函数只有在数组中的元素发生变化后才会重新渲染。没有第二个参数时，每次render都会重新渲染。

6.useMemo()：返回值钩子

useMemo和useCallback很相似，不同的是useMemo返回的是一个值，而不是函数。

useEffect(()=>{return props.name},[props.name])

7.useRef()：

useRef定义了不会发生改变的变量

const num = useRef(1)