【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 被包裹循环或条件语句中，那每就可能会引起调用顺序的错乱，从而造成意想不到的错误。

（编辑：晋中站长网）

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