React函数式组件值之useEffect()

　　Effect Hook 可以让你在函数组件中执行副作用操作，这里提到副作用，什么是副作用呢，就是除了状态相关的逻辑，比如网络请求，监听事件，查找 dom。

　　可以这样说，在使用了useState或是useEffect这样的hooks之后，每次组件在render的时候都生成了一份本次render的state、function、effects，这些与之前或是之后的render里面的内容都是没有关系的。而对于class component来说，state是一种引用的形式。这就造成了二者在一些表现上的不同。

一、基础用法

　　定义一个函数和一个数组。函数体为组件初始化或变化时执行的代码，返回值为组件销毁前执行的代码。数组参数中放的是触发此函数的依赖项数据。

useEffect(() => {
  // 相当于 componentDidMount、componentDidUpdate
  console.log("code");
  return () => {
    // 相当于 componentWillUnmount
    console.log("code");
  }
}, [/*依赖项*/])

二、监听参数

　　类组件在绑定事件、解绑事件、设定定时器、查找 dom 的时候，是通过 componentDidMount、componentDidUpdate、componentWillUnmount 生命周期来实现的，而 useEffect 会在组件每次 render 之后调用，就相当于这三个生命周期函数，只不过可以通过传参来决定是否调用。

　　其中注意的是，useEffect 会返回一个回调函数，作用于清除上一次副作用遗留下来的状态，如果该 useEffect 只调用一次，该回调函数相当于 componentWillUnmount 生命周期。

决定useEffect中各部分代码角色的是第二个参数：

• 什么都不传，组件每次 render 之后 useEffect 都会调用，相当于 componentDidMount 和 componentDidUpdate
• 传入一个空数组 [], 只会调用一次，相当于 componentDidMount 和 componentWillUnmount
• 传入一个数组，其中包括变量，只有这些变量变动时，useEffect 才会执行

function App () {
  const [ count, setCount ] = useState(0)
  const [ width, setWidth ] = useState(document.body.clientWidth)
  const onChange = () => {
    setWidth(document.body.clientWidth)
  }
  //最简单用法
  useEffect(() => {
    //只有方法体，相当于componentDidMount和componentDidUpdate中的代码
    document.title = count;
  })
  //加返回值用法
  useEffect(() => {
    //添加监听事件，相当于componentDidMount和componentDidUpdate中的代码
    window.addEventListener('resize', onChange, false);
    //返回的函数用于解绑事件，相当于componentWillUnmount中的代码
    return () => {
      window.removeEventListener('resize', onChange, false)
    }
  })
  //加空数组参数用法
  useEffect(() => {
    // 相当于 componentDidMount
    window.addEventListener('resize', onChange, false)
    return () => {
      // 相当于 componentWillUnmount
      window.removeEventListener('resize', onChange, false)
    }
  }, []);
  //加监听值用法
  useEffect(() => {
    //只有当count的值发生变化，此函数才会执行
    console.log(`count change: count is ${count}`)
  }, [ count ]);
  return (
    <div>
      页面名称: { count } 
      页面宽度: { width }
      <button onClick={() => { setCount(count + 1)}}>点我</button>
    </div>
    )
}

　　其实Function Component 不存在生命周期，把 Class Component 的生命周期概念搬过来试图对号入座只是一种辅助记忆手段，Function Component 仅描述 UI 状态，React 会将其同步到 DOM，仅此而已。

三、使用优化

　　我们在使用useState的时候，经常碰到capture value的问题，比如下面代码会输出5而不是3：

const App = () => {
  const [temp, setTemp] = React.useState(5);
  const printTime = () => {
    setTimeout(() => console.log(temp), 3000);
  };
  return (
    <div onClick={() => {
        printTime();
        setTemp(3);
      }}
    >clickMe</div>
  );
};

　　在printTime函数执行的那个 Render 过程里，temp 的值可以看作常量 5，执行 setTemp(3) 时会交由一个全新的 Render 渲染，所以不会执行printTime函数。而 3 秒后执行的内容是由 temp 为 5 的那个 Render 发出的，所以结果自然为 5。

　　原因就是 temp、printTime 都拥有 Capture Value 特性。而useEffect 也一样具有 Capture Value 的特性。

　　利用 useRef 就可以绕过 Capture Value 的特性。可以认为 ref 在所有 Render 过程中保持着唯一引用，因此所有对 ref 的赋值或取值，拿到的都只有一个最终状态，而不会在每个 Render 间存在隔离。也可以简洁的认为，ref 是 Mutable 的，而 state 是 Immutable 的。

function Example() {
  const [count, setCount] = useState(0);
  const latestCount = useRef(count);
  useEffect(() => {
    //设置最新变量的引用
    latestCount.current = count;
    setTimeout(() => {
      //读取引用指向的最新值
      console.log(`You clicked ${latestCount.current} times`);
    }, 3000);
  });
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}