hooks之useState和setEffect

useState

const [state, setState] = useState(initialState)

• 传入唯一的参数 initialState，可以是数字、字符串、对象、数组或者函数。对于函数，官方文档是这样描述的。

  如果初始 state 需要通过复杂计算获得，则可以传入一个函数，在函数中计算并返回初始的 state，此函数只在初始渲染时被调用。

• useState返回的是长度为2的数组，下标0对应的是state值，下标1对应的是 修改 state 的函数。

与在类中使用 setState 的异同点：

• 相同点
  • 也是异步的，例如在 onClick 事件中，调用两次 setState，数据只改变一次。
  • 两者都可以通过传入函数来获取上一次 state 的值，函数的返回值为新的state。
• 不同点
  • 类组件中更新state是合并，而hooks组件中更新state是直接替换。

    hooks中的合并可以用函数式的 setState 结合展开运算符来达到合并更新对象的效果。

    setState(prevState => {
      // 也可以使用 Object.assign
      return {...prevState, ...updatedValues};
    });
    

  • 类组件中的每一次更新state默认都会触发一次render。而useState 的更新后，则会通过Object.is 比较算法来比较 state ，决定是否更新，类似使用了React.PurComponent

useEffect

官网介绍说：

使用 useEffect 完成副作用操作。赋值给 useEffect 的函数会在组件渲染到屏幕之后执行。
你可以把 effect 看作从 React 的纯函数式世界通往命令式世界的逃生通道。
默认情况下，effect 将在每轮渲染结束后执行，但你可以选择让它 在只有某些值改变的时候 才执行。

相当于 componentDidMount 、 componentDidUpdate 以及 componentWillUnmount（在useEffect的回调中）的作用。但是又有区别，useEffect不会阻止浏览器更新屏幕

useEffect(()=>{},[依赖项]);

• 如果副作用对某些状态有依赖，务必添加依赖选项，依赖项为[]时执行一次。
• useEffect 是在浏览器 render 之后触发的，想要实现 DOM 改变时同步触发的话，得用 useLayoutEffect，在浏览器重绘之前和 DOM 改变一起，同步触发的。不过尽量在布局的时候，其他的用标准的 useEffect，这样可以避免阻止视图更新。

const [count, setCount] = useState(0)
useEffect(() => {
  const id = setInterval(() => {
    setCount(c => c + 1);
  }, 1000);
  return () => clearInterval(id);
}, []);

• 为防止内存泄漏，清除函数会在组件卸载前执行。另外，如果组件多次渲染（通常如此），则在执行下一个 effect 之前，上一个 effect 就已被清除。