react hooks用法解析

useCallback

用法

cosnt [name, setName] = useState('wang');

const changName = useCallback(newName => setName(newName), []);

解析

很多场景中，我们改变父组件的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({});

    

                                                                                          

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);                                                                                                  

解析：没什么可解析的，照着用就完事了