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

按照差异的页面名称修改页面title:

function useTitle(title) {  
  useEffect(  
    () => {  
      document.title = title;  
      return () => (document.title = "主页");  
    },  
    [title]  
  );  
}  
function Page1(props){  
  useTitle('Page1');  
  return (<div>...</div>)  
} 

双向绑定

我们将表单onChange的逻辑抽取出来封装成一个Hook，这样全部必要举办双向绑定的表单组件都可以举办复用：

function useBind(init) {  
  let [value, setValue] = useState(init);  
  let onChange = useCallback(function(event) {  
    setValue(event.currentTarget.value);  
  }, []);  
  return {  
    value,  
    onChange  
  };  
}  
function Page1(props){  
  let value = useBind('');  
  return <input {...value} />;  
} 

虽然，你可以向上面的HOC那样，团结context和form来封装一个更通用的双向绑定，有乐趣可以手动实现一下。

行使Hook的念头

镌汰状态逻辑复用的风险

Hook和Mixin在用法上有必然的相似之处，可是Mixin引入的逻辑和状态是可以彼此包围的，而多个Hook之间互不影响，这让我们不必要在把一部门精神放在防备停止逻辑复用的斗嘴上。

在不遵守约定的环境下行使HOC也有也许带来必然斗嘴，好比props包围等等，行使Hook则可以停止这些题目。

停止地狱式嵌套

大量行使HOC的环境下让我们的代码变得嵌套层级很是深，行使HOC，我们可以实现扁平式的状态逻辑复用，而停止了大量的组件嵌套。

让组件更轻易领略

（编辑：湖南网）

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