useCallback
用法
cosnt [name, setName] = useState('wang');
const changName = useCallback(newName => setName(newName), []);
<Child obj={obj} changName={changName}/>
解析
很多场景中，我们改变父组件的state后，父组件里面的方法也都会重新生成，造成子组件不必要的渲染，但是我们已知很多子组件和本次改变没有任何关系，所以就需要用useCallback方法，把传递给子组件的方法包裹起来，就可以避免不必要的渲染。
useMemo
用法
const obj = useMemo(() => ({name:'wang'}), [name]);
解析
使用场景和useCallback比较像，不过useCallback针对的是方法，而useMemo针对的是对象，当我们子组件有父组件传递来的props为对象时，在父组件改变state后，父组件传递给子组件的对象props也会重新生成，导致子组件不必要的渲染，所以就需要用useMemo方法，把传递给子组件的对象包裹起来，就可以造成不必要的渲染。
memo
用法
React.memo(Child)
解析
我们的容器组件中会有很多子组件，在父组件的state更新触发render时，很多不相关的子组件都会重新render，造成性能浪费，这种场景就需要memo，用memo包裹住子组件，避免不必要的渲染。
useState
用法
const [count, setCount] = useState(0);
解析
count是变量，相当于state.count，setCount相当于setState({count: val})
useEffect
用法
useEffect(() => { console.log('useEffect'); return ()=>{ } }, []);
解析
主要有两个参数，第一个参数就是要执行的函数，没什么特别的，第二个参数是一个数组，通过对这个数组的配置，达到代替各种生命周期的效果，
数组为空[]：相当于componentDidMount
数组为变量[state,props]：相当于componentDidUpdate，在相关变量更新的时候才会触发
末尾return一个函数：相当于componentWillUnmount
useContext
用法：
const ThemeContext = React.createContext({});
<ThemeContext.Provider value={{name:'wang'}}>
<Child1 />
<Child2 />
</ThemeContext.Provider>
const value = useContext(MyContext);
解析：
其实这个api类似于小型的redux，createContext创建一个react元素，然后用该元素的Provider包裹住需要消费的组件，被包裹的子组件、孙子组件就可以通过useContext获取传递值，避免了传统父子组件传递手写props，但该用法较少，目测原因有二，1：书写麻烦，特别是在数据多的情况下更为混乱，2：有更好的替代品redux，可以很好的处理该场景，redux的高阶组件为我们省了很多冗余代码。
useReducer
用法
const [state, dispatch] = useReducer(reducer, initialArg, init);
解析
可以用来代替useState，并带有配套的state、dispatch方法，用的比较少，暂不说多。
useRef
用法
const inputEl=useRef(null);
<input ref={inputEl} type="text"/>
解析：没什么可解析的，照着用就完事了
网友评论