当前位置: 代码迷 >> 综合 >> React Hook 详解
  详细解决方案

React Hook 详解

热度:57   发布时间:2023-11-18 11:45:38.0

Hook 是 React16.8 的新增特性。
React Native 从 0.59 版本开始支持 Hook。
它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

1、React.FC<>
React.FC<>的在typescript使用的一个泛型,FC就是Function Component的缩写,是函数组件,在这个泛型里面可以使用useState

2、什么是hooks
1】本质上就是一种特殊的函数,hooks可以在不编写 class类组件 的情况下使用 state 以及其他的 React 特性,广泛应用于react的函数组件里面。
2】类组件和函数组件
class类组件:
非常重,一个很小的功能模块的类组件,里面也包含一套自己的state(constructor构造函数)和完整的生命周期,多个父子组件相互调用,当state发生更新,render就会变得特别复杂。
函数组件:
非常轻量级和灵活,每个函数都是可复用的,但缺陷是函数是无状态的,所以需要用到state或者生命周期的时候,需要引入hooks。
3】命名:useXxx

3、有哪些hooks
1】useState
给函数组件里添加内部的 state
const [count, setCount] = useState(0);
第1个参数是state变量(getter),第2个参数是更新state的函数(setter)

2】useEffect 副作用钩子
副作用:与纯函数的概念相反,输入参数一样,而输出结果不确定,比如该函数涉及后端API请求,修改dom等操作。
Effect Hook 可以让你在函数组件中执行副作用操作,可用于取代生命周期函数componentDidMount、componentDidUpdate 和 componentWillUnmount
用法:
a、不传参数
useEffect(() => {
console.log(‘useEffect with no dependency’)
})
默认的行为,会每次 render 后都执行,一般表单控制中使用
类似于类组件中的componentDidMoount以及componentDidUpdate
b、空数组
传入第二个参数,每次 render 后比较数组的值没变化,不会在执行,类似于类组件中的 componentDidMount
useEffect(() => {
console.log(‘useEffect with empty dependency’)
}, [])
c、有一个或者多个值得数组
传入第二个参数,只有一个值,比较该值有变化就执行,
传入第二个参数,有2个值的数组,会比较每一个值,有一个不相等就执行
类似于类组件中的componentDidUpdate
useEffect(() => {
console.log(‘useEffect widh specify dependency’)
}, [state, props])
d、返回一个函数
返回时传递一个函数进行卸载,在组件卸载时候调用,类似于类组价中componentWillUnmout
useEffect(() => {
console.log(‘useEffect widh specify callback’);
  return () => {
    console.log(‘useEffect with specify callback’);
  }
})
注意:
useEffect里面async/await不允许直接使用,可以在内部另外创建1个异步函数

3】useContext 上下文钩子
class 类组件是用 props 传值的,而函数组件没有了constructor构造函数也就没有了props 的接收,而useContext可以帮助我们跨越组件层级直接传递变量
a、与redux的异同
useContext:解决的是组件之间值传递的问题
redux:是应用中统一管理状态的问题
b、用法
const TestContext = React.createContext({});
父组件传递变量给子组件

子组件接受变量:

4、高阶组件 HOC
1】定义
高阶组件是一个函数(高阶函数),参数是一个原组件,返回值是一个经过改造的新组件
注意:高阶组件不是组件
2】高阶组件的好处
a、抽取重复代码,实现组件复用
b、条件渲染,控制组件的渲染逻辑(渲染劫持)
c、捕获/劫持被处理组件的生命周期
3】实际应用
a、mobx-react就是高阶组件是一个实际应用
@observer装饰器将组件包装为高阶组件,传入组件MyComponent后,mobx-react会对其生命周期进行各种处理,并通过调用forceUpdate来进行刷新实现最小粒度的渲染。
b、鉴权判断
1.页面按钮所在的组件 2.封装了鉴权逻辑的高阶组件 3.公共按钮组件

  相关解决方案