【React深入】从Mixin到HOC再到Hook

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

页面渲染...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, []);  
} 

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

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!