襄阳网站建设企业,制作广告,修复wordpress,网站如何跳转React 基础巩固(四十二)——React Hooks的介绍
一、为什么需要Hook?
Hook 是 React 16.8 的新增特性#xff0c;它可以让我们在不编写class的情况下使用state以及其他的React特性#xff08;比如生命周期#xff09;。
class组件 VS 函数式组件#xff1a;
class的优势…React 基础巩固(四十二)——React Hooks的介绍
一、为什么需要Hook?
Hook 是 React 16.8 的新增特性它可以让我们在不编写class的情况下使用state以及其他的React特性比如生命周期。
class组件 VS 函数式组件
class的优势
class组件可以定义自己的state用来保存组件自己内部的状态而函数式组件不可以因为函数每次调用都会产生新的临时变量。class组件有自己的生命周期我们可以在对应的生命周期中完成自己的逻辑。比如在componentDidMount中发送网络请求并且该生命周期函数只会执行一次。如果在函数中发送网络请求意味着每次重新渲染都会重新发送一次网络请求。class组件可以在状态改变时只会重新执行render函数以及我们希望重新调用的生命周期函数componentDidUpdate等而函数式组件在重新渲染时整个函数都会被执行似乎没有什么地方可以只让它们调用一次。
class的劣势 组件变得日益复杂 随着业务的增多class组件会变得越来越复杂比如componentDidMount中可能就会包含大量的逻辑代码包括网络请求、一些事件的监听还需要在componentWillUnmount中移除而对于这样的class实际上非常难以拆分因为它们的逻辑往往混在一起强行拆分反而会造成过度设计增加代码的复杂度 难以理解的class 在class中我们必须搞清楚this的指向到底是谁所以需要花很多的精力去学习this非常麻烦 组件复用状态困难 复用状态需要通过高阶组件或者类似于Provider、Consumer来共享一些状态但是多次使用Consumer时我们的代码就会存在很多嵌套
Hook的优势
解决问题在不编写class的情况下使用state以及其他的React特性由此延伸出非常多的用法来解决上述的问题。完美兼容基本可以代替我们之前所有使用class组件的地方它完全向下兼容可以渐进式的来使用它。
二、类组件和结合Hook的函数组件的对比 用类组件实现一个计数器 import React, { PureComponent } from react;export class CounterClass extends PureComponent {constructor(props) {super(props);this.state {counter: 0,};}increment() {this.setState({counter: this.state.counter 1,});}decrement() {this.setState({counter: this.state.counter - 1,});}render() {const { counter } this.state;return (divh2当前计数{counter}/h2button onClick{(e) this.increment()}1/buttonbutton onClick{(e) this.decrement()}-1/button/div);}
}export default CounterClass; 用Hook函数组件的方式实现一个计数器 import { memo, useState } from react;function CounterHook(props) {const [counter, setCounter] useState(0);return (divh2当前计数{counter}/h2button onClick{(e) setCounter(counter 1)}1/buttonbutton onClick{(e) setCounter(counter - 1)}-1/button/div);
}export default memo(CounterHook); 对比结果 两者虽然都能实现相同的计数器效果但是从上文的代码量来看利用Hook函数组件的方式代码更简洁使用更方便并且不用考虑this的相关问题这就是Hook带来的历史性变革
