背后是类组件和函数组件的认知区别
函数组件会捕获 render 内部的状态，这是两类组件最大的不同。

####

1、useState

Code
1
2
// 基础用法
const [state, setState] = useState(initialState);

注意：

Code
1
2
3
4
5
if(showSex){
    const [ sex , setSex ] = useState('男')
    showSex=false
}
上面写法会报错，原因是：React Hooks不能出现在条件判断语句中，因为它必须有完全一样的渲染顺序。

####

2、useEffect 允许函数组件执行副作用操作

useEffect代替生命周期

Code
1
2
3
// 基本用法
// @params callBack 回调函数 [] 依赖函数
useEffect(callBack, [])

#####

每一次渲染都执行
Code
1
useEffect(callBack)

#####

仅在挂载阶段执行一次
Code
1
useEffect(callBack, [])

#####

仅在挂载和卸载阶段执行一次
Code
1
2
3
useEffect(( ) => {
    return ( ) => { }
}, [ ])

！！！面试题 为什么需要 React-Hooks

  • 告别难以理解的 Class；
  • 解决业务逻辑难以拆分的问题；
  • 使状态逻辑复用变得简单可行；
  • 函数组件从设计思想上来看，更加契合 React 的理念。

###

[useEffect 两个注意点]

  1. React 首次渲染和之后的每次渲染都会调用一遍 useEffect 函数，而之前我们要用两个生命周期函数分别表示首次渲染(componentDidMonut)和更新导致的重新渲染(componentDidUpdate)。
  2. useEffect 中定义的函数的执行不会阻碍浏览器更新视图，也就是说这些函数时异步执行的，而 componentDidMonut 和 componentDidUpdate 中的代码都是同步执行的。个人认为这个有好处也有坏处吧，比如我们要根据页面的大小，然后绘制当前弹出窗口的大小，如果时异步的就不好操作了。
  3. useContext 实现父子元素通信
  4. useReducer

useContext：可访问全局状态，避免一层层的传递状态。这符合 Redux 其中的一项规则，就是状态全局化，并能统一管理。 useReducer：通过 action 的传递，更新复杂逻辑的状态，主要是可以实现类似 Redux 中的 Reducer 部分，实现业务逻辑的可行性。