Hook
没有破坏性的改动
- 完全可选的。 你无需重写任何已有代码就可以在一些组件中尝试 Hook。
- 100% 向后兼容的。 Hook 不包含任何破坏性改动。
- 现在可用。 Hook 已发布于 v16.8.0。
动机
- Hook 使你在无需修改组件结构的情况下复用状态逻辑。
- Hook 将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据）。
- Hook 使你在非 class 的情况下可以使用更多的 React 特性。
相较于js额外的规则
- 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
- 只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。
useState Hook
- 通过useState的方式来定义一个state
const [count,setCount]=useState(0)后面（0）是设置默认为0
- 通过
setCount(count+1)来获取数据和修改数据
Effect Hook
- 跟 class 组件中的
componentDidMount、componentDidUpdate和 componentWillUnmount具有相同的用途。
- 可以通过返回一个函数来指定如何“清除”副作用。例如
useEffect(() => {
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
});
- Effect可以定义多个，可以按照代码的用途分离他们实现关注点分离，比如需要销毁的可以放一起统一销毁。
- 可以设置某些特定值在两次重渲染之间没有发生变化的情况下跳过Effrct
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]); // 仅在 count 更改时更新
