React Hook详解

一、useEffect

1. 构成

完整的useEffect

useEffect(() => {
  return () => {}
},[])

我们分成三个部分来看：

1. useEffect(() => {})的箭头函数，是useEffect的effct函数，即副作用函数
2. effect函数中的return中的箭头函数，是useEffect的返回函数，组件卸载时执行
3. []最后一个参数，是useEffect函数的依赖项,如果useEffect依赖的数据变化，即重新执行

2. 模拟生命周期

(1).模拟componentDidMount功能

useEffect的第二个参数依赖项设置为一个空数组，这样在初次调用后就不再执行了，相当于componentDidMount

function Demo () {
  useEffect(() => {
    console.log('hello world')
  }, [])
  return (
    <div>
      hello world
    </div>
  )
}

(2).模拟componentDidMount 和 componentDidUpdate功能

当useEffect没有第二个参数的时，组件的初始化和更新都会执行

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

(3).模拟componentDidMount 和 componentWillUnmount功能

当useEffect返回一个函数，这个函数会在组件卸载的时候执行

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

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

  return <h1>hello world</h1>
}