React Hooks

1. React Hooks简介

React Hooks 是使用 函数的形式 替代传统的 类继承的形式，并使用 预函数 的形式管理state 的react 写法

2. 语法

1. useState()

useState 是 react 自带的一个hook函数，用来声明、读取、使用（修改）状态变量

import React, {useState} from 'react';
// useState() 返回一个数组，第一个是状态的初始值，第二个是修改状态的函数方法
const [name, setName] = useState('wuyanbin')

2. useEffect()

useEffect() 是react 替换传统声明周期函数的hook 函数，useEffect()接受的函数是异步执行，不会阻塞页面的渲染

useEffect() == componentDidMount()

组件初次渲染的时候执行的钩子函数

useEffect() == componentDidUpdate()

组件状态发生变化的时候执行的钩子函数

useEffect() == componentWillUnmount()

useEffect(()=>{
    return ()=>{
      console.log('在此处解绑副作用');
  }
}, []) // useEffect 的第二个参数，可放入执行的状态，如果为空，在组件销毁时进行解绑

3. useContext()

Context 的作用就是对它所包含的组件树提供全局共享数据的一种技术

import React, {createContext, useContext} from 'react'
// 创建一个容器
const CountContext = createContext()
// 
function Demo(){
    return (
      <CountContext.Provider value={count}>
        <Counter/>
    </CountContext.Provider>
  )
}
// 
function Counter(){
    return (
      const count = useContext(CountContext)
      return (<div>{count}</div>)
  )
}

4. useReducer()

reducer 是一个函数，该函数接受两个参数，一个是状态，一个是用来控制状态的参数

function countReducer(state, action){
    switch(action.type){
    case 'add':
      return state + 1;
    case 'sub':
      return state - 1;
    default:
      return state;
  }
}

5. useMemo() / useCallback

用于解决React Hooks 产生无用渲染的性能问题

6. useRef()

• 获取react jsx 中的DOM元素
• 用useRef 来保存变量

参考资料

• useHooks: https://usehooks.com/
• 官方文档：https://react.docschina.org/docs/hooks-intro.html