最近重读了一遍 react官方文档中文版,又得了些读书笔记:
1.ref的使用注意事项
- 只能用在dom节点和class组件上,如果要用在function组件,使用React. forwardRef暴露给父组件(ref转发,forward向前的意思)并在useImperativeHandle中定义父组件可调用的子组件方法
2.<></>插入key
<></>实际上是<React.Fragment>的简写模式,所以当要增加key时,可以这些写
1 | {props.items.map(item => ( |
key属性是React.Fragment唯一支持的属性
3.不要在render中使用HOC(高阶组件)
1 | render() { |
类似于在render中重新定义组件的问题都要注意
4.如果useState的初始state需要经过复杂计算得到,可以使用setState(func)
1 | const [state, setState] = useState(() => { |
此函数只会在初始渲染时执行一次
5.useEffect的执行时间
默认情况下,useEffect包裹的函数,将在每轮渲染结束后执行(一个延迟事件中被调用);
如果想要在绘制前执行,请使用 useLayoutEffect
return的清除函数,会在执行下一个effect之前
6.useEffect的注意事项
- 尽量在useEffect中声明会调用的函数,而不是调用外部函数,因为这样容易以为没有用到某些props或state,而没有声明必要的依赖数组
1 | function Example({ someProp }) { |
1 | function Example({ someProp }) { |
- 处理组件卸载后请求响应回调的setData引发的报错
1 | useEffect(() => { |
7.使用reducer处理深度的props回调函数传递
1 | const TodosDispatch = React.createContext(null); |
8.useRef和createRef的区别
定义区别:useRef相当于this,是一个容器,用于存放任意变量;createRef专用于dom的引用
使用区别:createRef用于class组件获取dom,放在构造函数中只执行一次,如果放在函数组建中会每次render执行
本质区别:createRef 每次渲染都会返回一个新的引用,而 useRef 每次都会返回相同的引用
1 | const App = () => { |
使用技巧1:使用useRef显示上一个值:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15export default function App(){
const [count, setCount] = useState(0);
const preCountUseRef = useRef();
// 为什么保存的是上一个值:因为useEffect是渲染之后执行,而useRef的修改不会触发render
useEffect(()=>{
preCountUseRef.current = count;
}); // 没有第二个参数,则每次render之后都执行
return (
<div>
<p>preCount: {preCountUseRef.current}</p>
<p>You clicked {count} times</p>
<button onClick={()=>setCount(count+1)}>Click me</button>
</div>
)
}使用技巧2:封装成自定义hook:
1
2
3
4
5
6
7
8
9
10const usePrevious = state =>{
const ref = useRef();
useEffect(()=>{
ref.current = state;
});
return ref.current;
}
// 使用自定义hook
const preCount = usePrevious(count);