【React深入】从Mixin到HOC再到Hook(13)

注意，如果加上浏览器渲染的情况，结果应该是这样的：

页面渲染...1  
 执行... 1  
 页面渲染...2  
 清理... 1  
 执行... 2  
 页面渲染...3  
 清理... 2  
 执行... 3  
 页面渲染...4  
 清理... 3  
 执行... 4 

那么为什么在浏览器渲染完后，再执行清理的方法还能找到上次的state呢？原因很简单，我们在useEffect中返回的是一个函数，这形成了一个闭包，这能保证我们上一次执行函数存储的变量不被销毁和污染。

你可以尝试下面的代码可能更好理解 

var flag = 1;  
    var clean;  
    function effect(flag) {  
      return function () {  
        console.log(flag);  
      }  
    }  
    clean = effect(flag);  
    flag = 2;  
    clean();  
    clean = effect(flag);  
    flag = 3;  
    clean();  
    clean = effect(flag);  
    // 执行结果  
    effect... 1  
    clean... 1  
    effect... 2  
    clean... 2  
    effect... 3 

模拟componentDidMount

componentDidMount等价于useEffect的回调仅在页面初始化完成后执行一次，当useEffect的第二个参数传入一个空数组时可以实现这个效果。

function useDidMount(callback) {  
  useEffect(callback, []);  
} 

官方不推荐上面这种写法，因为这有可能导致一些错误。

模拟componentWillUnmount

function useUnMount(callback) {  
  useEffect(() => callback, []);  
} 

不像 componentDidMount 或者 componentDidUpdate，useEffect 中使用的 effect 并不会阻滞浏览器渲染页面。这让你的 app 看起来更加流畅。

ref Hook

使用useRef Hook，你可以轻松的获取到dom的ref。

export default function Input() {  
  const inputEl = useRef(null);  
  const onButtonClick = () => {  
    inputEl.current.focus();  
  };  
  return (  
    <div>  
      <input ref={inputEl} type="text" />  
      <button onClick={onButtonClick}>Focus the input</button>  
    </div>  
  );  
} 

注意useRef()并不仅仅可以用来当作获取ref使用，使用useRef产生的ref的current属性是可变的，这意味着你可以用它来保存一个任意值。

模拟componentDidUpdate

componentDidUpdate就相当于除去第一次调用的useEffect，我们可以借助useRef生成一个标识，来记录是否为第一次执行：

function useDidUpdate(callback, prop) {  
  const init = useRef(true);  
  useEffect(() => {  
    if (init.current) {  
      init.current = false;  
    } else {  
      return callback();  
    }  
  }, prop);  
} 

使用Hook的注意事项

使用范围

•  只能在React函数式组件或自定义Hook中使用Hook。

Hook的提出主要就是为了解决class组件的一系列问题，所以我们能在class组件中使用它。

声明约束

•  不要在循环，条件或嵌套函数中调用Hook。

Hook通过数组实现的，每次 useState 都会改变下标，React需要利用调用顺序来正确更新相应的状态，如果 useState 被包裹循环或条件语句中，那每就可能会引起调用顺序的错乱，从而造成意想不到的错误。

（编辑：ASP站长网）