【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，我们可以实现扁平式的状态逻辑复用，而避免了大量的组件嵌套。

让组件更容易理解

（编辑：晋中站长网）

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