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

模仿componentWillUnmount

function useUnMount(callback) {  
  useEffect(() => callback, []);  
} 

不像 componentDidMount 可能 componentDidUpdate，useEffect 中行使的 effect 并不会阻滞赏识器渲染页面。这让你的 app 看起来越发流通。

ref Hook

行使useRef Hook，你可以轻松的获取到dom的ref。

export default function Input() {  
  const inputEl = useRef(null);  
  const onButtonClick = () => {  
    inputEl.current.focus();  
  };  
  return (  
    <div>  
      <input ref={inputEl} type="text" />  
      <button onClick={onButtonClick}>Focus the input</button>  
    </div>  
  );  
} 

留意useRef()并不只仅可以用来看成获取ref行使，行使useRef发生的ref的current属性是可变的，这意味着你可以用它来生涯一个恣意值。

模仿componentDidUpdate

componentDidUpdate就相等于撤除第一次挪用的useEffect，我们可以借助useRef天生一个标识，来记录是否为第一次执行：

function useDidUpdate(callback, prop) {  
  const init = useRef(true);  
  useEffect(() => {  
    if (init.current) {  
      init.current = false;  
    } else {  
      return callback();  
    }  
  }, prop);  
} 

行使Hook的留意事项

行使范畴

•  只能在React函数式组件或自界说Hook中行使Hook。

Hook的提出首要就是为了办理class组件的一系列题目，以是我们能在class组件中行使它。

声明束缚

•  不要在轮回，前提或嵌套函数中挪用Hook。

Hook通过数组实现的，每次 useState 城市改变下标，React必要操作挪用次序来正确更新响应的状态，假如 useState 被包裹轮回或前提语句中，那每就也许会引起挪用次序的错杂，从而造成意想不到的错误。

（编辑：湖南网）

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