React 之Hook

Hook是React16.8的新增特性

useState

对应的是state

[初始值，对应的操作]

• 先引入

  

• 不需要this

useEffect 监听受影响

useEffect是监听，数据的改变，还是使用usestate

num改变之后，触发useEffect

componentDidMount的操作，可以写在useEffect中 取代生命周期

[]表示要跟踪的事情

useContext 组件通信

• 引入儿子组件Child1，儿子组件中引入了Child11孙组件

  

新建文件context/index.js

新的对象，类似bus

在UserContext.js中使用

公共数据提供者

Child1中儿子组件中

• 可以通过props，一层层传，在function的括号中，传入props即可

Child11孙组件中

• 可以通过props，一层层传

• 可以通过context

useref 标签标记取值

获取输入框的值 传统写法

使用useref

let usernameInput= useRef()

此时ref后面不能是字符串

useCallback 缓存函数

子组件child1.js

把子组件用memo包裹起来，缓存函数

父组件

常规写法，重复渲染，重复加载组件

不希望组件重新被加载，被渲染

不希望子组件，再次受到渲染，则用memo包裹

把要做的事情，写到callback里面

注意：

useMemo 缓存数值（变量）

注意：所谓性能优化，就是提高缓存

未缓存的

调用要写到return里面

使用memo进行缓存

用useMemo包裹起来，就可以缓存数值

Hook跨组件使用ref

以下就是 父调子的ref

引入，要使用forwardRef，可以向前传

让其具有传递的属性

把子组件的函数，直接传给父元素

方法放入useImperativeHandle中，并传入props,ref

在父组件使用

只能点到这个组件内部的函数

Hooks配合react-redux的两种方法

传统写法

新写法

userSelector

Hook 父传子

父组件

子组件

Hook子传父

子组件

父组件

在父组件中定义事件

Hook中的路由跳转