我所理解的 React Hooks

Question

hooks 出现的原因

class 自身存在的问题

组件逻辑复用困难，尽管拥有 HOC 和 render props ，逻辑复用还是比较困难。

在不同生命周期中执行不同的逻辑，组件会变得越来越复杂。相关的逻辑不好抽离

使用 Class 组件只为了组件定义状态，视图和逻辑，其实没有用到 Class 的太多功能。而且还需要处理 this 的绑定

通过 this 读取状态，是有副作用的。并不能确保状态的正确性

class ProfilePage extends React.Component { 
	showMessage = () => {
		alert('Followed ' + this.props.user); 
	};
	
	handleClick = () => { 
		setTimeout(this.showMessage, 3000); 
	}; 
	render() {
		return <button onClick{this.handleClick}>
			Follow</button>; 
	}
}
 

例如这个组件，点击发生后，如果 props 改变，那么最终的弹出的数据并不符合点击时的预期

增强函数组件

之前版本的函数组件太过鸡肋，只能用于展示，自身不拥有状态。

hooks 存在的问题

使用场景限制

React hook 不能在判断语句中使用

cosnt [count, setCount] = useState(0)
if(count == 2) {
   const [num, setNum] = useState(1)
}
...

具体原因是和 hook 的原理有关。 hook 通过闭包维护状态，然后将每个 hooks 注册到一个链表中进行存储，也就是说 hook 本身取值是有顺序的。

当组件更新时，hook 重新执行，如果通过条件语句新增或者减少 hook 都会影响到原有链表的顺序，造成取值异常。

闭包陷阱

当我们使用 useEffect 时，不同的依赖项会有不同的效果。 当我们传入空数组时， 此时的 useEffect 相当于 componentDidMount. 只会执行一次。结合函数使用时，就有可能产生的问题。

export default function App() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const timer = setInterval(() => {
      console.log(count);
    }, 3000);
  }, []);
  return (
    <div className="App">
      <h1> {count}</h1>
      <h2 onClick={() => setCount(count + 1)}>
        Start editing to see some magic happen!
      </h2>
    </div>
  );
}

这个例子中， 定时器通过闭包获取的变量永远都是第一次渲染时的 count， 导致打印的都是 0，其实不止定时器，还有在 useEffect 外部定义的函数，都有可能产生这个问题。

解决办法：

useEffect 添加依赖，内部函数使用到了哪个变量，就加入到依赖项。函数也是如此

 const [count, setCount] = useState(0);
  useEffect(() => {
    const timer = setInterval(() => {
      console.log(count);
    }, 3000);
    return () => {
      clearInterval(timer)
    }
  }, [count]);

使用 useRef，由于 ref 是一个对象，它的 current 才指向真实的值。所以可以避免这个问题