记录一下 React Hooks
大概不久就是各种 hooks 漫天飞舞的世界。变天了。
本文记录一下 React Hooks 学习，算是还一下技术债。只是一些形式化的理解的整理，不求甚解。
State Hooks
import { useState } from 'react';
function ExampleWithManyStates() {
// 声明多个 state 变量
const [age, setAge] = useState(42);
const [fruit, setFruit] = useState('banana');
const [todos, setTodos] = useState([{ text: '学习 Hook' }]);
const [name, setName] = useState(() => 'jeremy'); // 允许传一个函数来初始化状态
return
);
}
const Child = (props) => {
const theme = useContext(ThemeContext);
return (
);
}
useReducer
const [state, dispatch] = useReducer(reducer, initialArg, init);
const initialState = {count: 0};
function reducer(state, action) {
switch (action.type) {
case 'increment':
return {count: state.count + 1};
case 'decrement':
return {count: state.count - 1};
default:
throw new Error();
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<>
Count: {state.count}
);
}
useCallback
function Foo(props) {
const [count, setCount] = useState(0);
return ;
}
// 优化一下
function Foo(props) {
const [count, setCount] = useState(0);
// 这样只创建一次回调函数
const handleVisible = useCallback(e => {
props.handleVisible(false);
}, [])
return ;
}
//
function Foo(props) {
const [count, setCount] = useState(0);
const reportCount = useCallback( count => e => {
props.reportCount(count);
},)
return ;
}
useMemo
useMemo 能记忆一个方法执行的结果值，假如下次刷新组件时，依赖不变，则useMemo不会执行这个方法，而是直接拿到上次记忆的值。
如果这个方法是个耗时运算，或是返回一个组件，当依赖不变，就直接拿记忆值，这样就能起到性能优化的效果。
const long_time_result = useMemo(() => {
const result = long_time_function(count);
return result;
}, [count])
useRef
是用对象引用方式，用户代码可以用它来做一般数据的缓存。说白了还是一种持久化。
so 和useState 有什么差别呢？唯一差别是：useState多返回了一个可以刷新本组件的方法，而useRef单纯提供一个引用访问链，你组件再怎么重复刷新，这个引用链也不会断掉。
这个钩子，在组件两次刷新之间，因为会产生两帧独立的闭包，所以用它来保持数据关联性就非常合适了。
React.memo
function MyComponent(props) {
// render using props
}
function areEqual(prevProps, nextProps) {
// return true if passing nextProps to render would return
// the same result as passing prevProps to render,
// otherwise return false
}
export default React.memo(MyComponent, areEqual);
总结一下
1、useState 和 useRef钩子行为相似。
2、useContext具有透传能力
3、其他钩子在于依赖。
4、捕获值的这个特性是我们写钩子最最需要注意的问题，它是函数特有的一种特性，并非函数式组件专有。函数的每一次调用，会产生一个属于那一次调用的作用域，不同的作用域之间不受影响。
其他
react-redux的钩子
状态管理方面，React 社区最有名的工具当然是 Redux。在 react-redux@7.1 中新引用了三个 API:
useSelector。它有点像 connect() 函数的第一个参数 mapStateToProps，把数据从 state 中取出来；
useStore 。返回 store 本身；
useDispatch。返回 store.dispatch。
关于测试
觉得还是到改了一部分 hooks 写法后，在加单元测试。现在堆积了很多逻辑的 class 组件真心难写。如何测试使用了 Hook 的组件4
clicked {count} times
发表评论 (审核通过后显示评论)：