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

我们可以安装一个eslint插件来辅佐我们停止这些题目。

// 安装  
npm install eslint-plugin-react-hooks --save-dev  
// 设置  
{  
  "plugins": [  
    // ...  
    "react-hooks"  
  ],  
  "rules": {  
    // ...  
    "react-hooks/rules-of-hooks": "error"  
  }  
} 

自界说Hook

像上面先容的HOC和mixin一样，我们同样可以通过自界说的Hook将组件中相同的状态逻辑抽取出来。

自界说Hook很是简朴，我们只必要界说一个函数，而且把响应必要的状态和effect封装进去，同时，Hook之间也是可以彼此引用的。行使use开头定名自界说Hook，这样可以利便eslint举办搜查。

下面我们看几个详细的Hook封装：

日记解决

我们可以行使上面封装的生命周期Hook。

const useLogger = (componentName, ...params) => {  
  useDidMount(() => {  
    console.log(`${componentName}初始化`, ...params);  
  });  
  useUnMount(() => {  
    console.log(`${componentName}卸载`, ...params);  
  })  
  useDidUpdate(() => {  
    console.log(`${componentName}更新`, ...params);  
  });  
};  
function Page1(props){  
  useLogger('Page1',props);  
  return (<div>...</div>)  
} 

修改title

（编辑：湖南网）

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