【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

（编辑：晋中站长网）

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