React Hooks用法简要概括及其使用规则

React Hooks用法简要概括及其使用规则

Hooks是React v16.7.0-alpha中加入的新特性。它可以让你在class以外使用state和其他React特性。

State Hook

useState(defaultValue)

用法

//需要引入
import {
   useState} from 'react'

const [count, setCount] = useState(0);

useState返回第一个是 state 的属性, 第二个是用于修改这个属性的方法.传入参数为该属性的默认值.

通过数组解构赋给了你声明的一个值引用一个函数引用.

上面的代码相当于给 state 添加了 count 属性, 然后 setCount 是更新 count 的方法. 传入的参数0为 count 的默认值.

这个设定的默认值仅仅是用在第一次render执行期间. 后续值更新就和这个默认值无关了.

第一个参数可以是number 可以是 string 可以是对象等等.

方便的是, state hook 不必再写一个函数用于更新, 不必在 constructor 中绑定等等.

Effect Hook

useEffect(function)

用法

不应该在 render 中调用 effect

effect 在 DOM 渲染或者更新完毕后执行.

useEffect在 React 的生命周期中相当于componentDidMount, componentDidUpdate, 和componentWillUnmount 的结合.

不应该在 effect 中更新 state

const [count, setCount] = useState(0);

useEffect(() => {
   
  set(count+1);
})

这样将会无限地执行下去.

每次 state 更新后都会生成一个不同的 effect,代替之前的 effect

如果返回一个function, React 将会在 当前 effect 清除(clean up)时执行.

useEffect(() => {
   
  console.