React函数式组件值之useEffect()

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

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

一、基础用法

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

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

二、监听参数

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

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

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

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

function App () {  2   const [ count, setCount ] = useState(0)  3   const [ width, setWidth ] = useState(document.body.clientWidth)  4   const onChange = () => {  5  setWidth(document.body.clientWidth)  6  }  7   //最简单用法
  useEffect(() => {  9     //只有方法体，相当于componentDidMount和componentDidUpdate中的代码
    document.title = count; 11  }) 12   //加返回值用法
  useEffect(() => { 14     //添加监听事件，相当于componentDidMount和componentDidUpdate中的代码
    window.addEventListener('resize', onChange, false); 16     //返回的函数用于解绑事件，相当于componentWillUnmount中的代码
    return () => { 18       window.removeEventListener('resize', onChange, false) 19  } 20  }) 21   //加空数组参数用法
  useEffect(() => { 23     // 相当于 componentDidMount
    window.addEventListener('resize', onChange, false) 25     return () => { 26       // 相当于 componentWillUnmount
      window.removeEventListener('resize', onChange, false) 28  } 29  }, []); 30   //加监听值用法
  useEffect(() => { 32     //只有当count的值发生变化，此函数才会执行
 console.log(`count change: count is ${count}`) 34  }, [ count ]); 35   return ( 36     <div>
 页面名称: { count } 38  页面宽度: { width } 39       <button onClick={() => { setCount(count + 1)}}>点我</button>
    </div>
 ) 42 }

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

三、使用优化

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

const App = () => {  2   const [temp, setTemp] = React.useState(5);  3   const printTime = () => {  4     setTimeout(() => console.log(temp), 3000);  5  };  6   return (  7     <div onClick={() => {  8  printTime();  9         setTemp(3); 10  }} 11     >clickMe</div>
 ); 13 };

　　在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() {  2   const [count, setCount] = useState(0);  3   const latestCount = useRef(count);  4   useEffect(() => {  5     //设置最新变量的引用
    latestCount.current = count;  7     setTimeout(() => {  8       //读取引用指向的最新值
 console.log(`You clicked ${latestCount.current} times`); 10     }, 3000); 11  }); 12   return ( 13     <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
 ); 18 }