React Hooks（二）

useEffect

下面我们来介绍react hooks提供的第二个api  useEffect

很多同学可能会问 如果某些操作需要在render后进行操作怎么办，这个api就是干这个的。

其相当于componentDidMount 或者 componentDidUpdate。

举个🌰

// 以前的写法
componentDidMount() {
  document.title = this.state.num;
}

componentDidUpdate() {
  document.title = this.state.num`;}


// 现在的写法

import { useState, useEffect } from 'react';

const renderNum = () => {  const [num, setState] = useState(0);    // 等同于
   const result = useState(0);
   const num = result[0];
   const setState = result[1];

  useEffect(()=>{
    document.title = this.state.num
  })  return (
    <div>
       <div>{num}</div>
       <button onClick={() => setState(num + 1)}>+</button>

       <button onClick={() => setState(num - 1)}>-</button>     </div>  );
};

像这样如果需要在render后进行操作 那么直接放在useEffect函数内即可。

但是这样会有一个问题，如果只有在第一次mount调用，而只会不调用怎么办。react官方已为你考虑到了。你只需在useEffect api里加入第二个参数（随意类型，只要为永远不变即可）即可。