React 类组件

已于 2022-02-22 21:43:19 修改
阅读量166 收藏
点赞数
分类专栏： 日常记录 文章标签： react.js 前端
于 2022-02-22 21:42:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44365080/article/details/123078170
版权

创建 Class 组件

  1. ES5 方式（过时）

    import React from 'react'

const A = React.createClass({
    render(){
        return(<div>hi</div>)
    }
})
export default A
// 由于 ES5 不支持 class，才会有这种方法

  2. ES6 方式

    import React from 'react'

class B extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        return (<div>hi</div>)
    }
}
export default B

props

传入 props 给 B 组件

class Parent extends React.Component {
    constructor(props){
        super(props)
        this.state = {name: 'frank'}
    }
    onClick = () => {}
    render(){
        return(
        <B name={this.state.n} onClick={this.onClick}>hi</B>
        )
    }
}
// 外部数据被封装为一个对象
// {name: 'frank', onClick:...,children: 'hi'}

初始化

class B extends React.Component{
    constructor(props){
        super(props)
    }
    render(){...}
}
// this.props 就是外部数据 对象的地址 了

读取

class B extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        return(
            <div onClick={this.props.onClick}>
            {this.props.name}
                <div>{this.props.chrldren}</div>
            </div>
        )
    }
}
// 通过 this.props.xxx 读取

props 的作用

接受外部数据

  • 只能读不能写
  • 外部数据由父组件传递

接受外部函数

  • 在恰当的时机，调用该函数
  • 该函数一般是父组件的函数

state & setState

初始化

class B extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            user: {
                name: 'frank',
                age: 18
            }
        }
    }
    render(){...}
}

读写 State

读 this.state

this.state.user.name


写 this.setState(???,fn)

this.setState(newState, fn)

注意 setState 不会立刻改变 this.state，会在当前代码运行完后，再去更新 this.state，从而触发 UI 更新。（异步）

this.setState((state, props) => newState, fn)

这种方式的 state 更容易理解

fn 会在写入成功后执行。

shallow merge: setState 会自动将新的 state 与 旧的 state 进行一级合并。

onClick = () => {
  this.setState({ x: this.state.x + 1 });
};

onClick2 = () => {
  this.setState( (state) => ({ x: state.x + 2 }) );
};


onClick = () => {
  this.setState(
    {
      x: this.state.x + 1,
    },
    // callback
    () => {
      this.setState({ x: this.state.x + 1 });
    }
  );
};

修改 this.state 的属性值，不推荐用！

this.state.x += 1
this.setState(this.state)

生命周期

生命周期图谱


类比如下代码

let div = document.createElement('div')
这是 div 的 create / construct 过程

div.textContent = 'hi'
这是初始化 state

document。body.appendChild(div)
这是 div 的 mount 过程

div.textContent = 'hi2'
这是 div 的 update 过程

div.remove()
这是 div 的 unmount 过程

函数列表

constructor()

static getDerivedStateFromProps()

shouldComponentUpdate()

render()

getSnapshotBeforeUpdate()

componentDidMount()

componentDidUpdate()

componentWillUnmount()

static getDerivedStateFromError()

componentDidCatch()


函数列表-必会

constructor() - 在这里初始化 state
shouldComponentUpdate() - return false 阻止更新
render() - 创建虚拟 DOM
componentDidMount() - 组件已出现在页面
componentDidUpdate() - 组件已更新
componentWillUnmount() - 组件将死

constructor

用途：

初始化 props

初始化 state，但此时不能调用 setState

用来写 bind this

constructor(){
    ...
    this.onClick = this.onClick.bind(this)
}

可以用新语法代替

constructor(){...}
onClick = () => {}

shouldComponentUpdate

用途：

返回 true 表示不阻止 UI 更新

返回 false 表示阻止 UI 更新

面试常问：shouldComponentUpdate 有什么用？

答：它允许我们手动判断是否要进行组件更新，我们可以根据应用场景灵活地设置返回值，以避免不必要地更新。

import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      n: 1,
    };
  }
  onClick = () => {
    this.setState((state) => ({ n: state.n + 1 }));
    this.setState((state) => ({ n: state.n - 1 }));
  };
	// {n:1} 和 {n:1}
  shouldComponentUpdate(nextProps, nextState) {
      // 阻止渲染
    if (nextState.n === this.state.n) {
      return false;
    } else {
      return true;
    }
  }
  render() {
    console.log("render了一次");
    return (
      <div>
        App组件<br />
        {this.state.n}
        <button onClick={this.onClick}>+1</button>
      </div>
    );
  }
}
export default App;

可以使用 React.PureComponent 替代 React.Component 实现 shouldComponentUpdate()

PureComponent 会在 render 之前对比新 state 和旧 state 的每一个 key，以及新 props 和旧 props 的每一个 key。
如果所有 key 的值全都一样，就不会 render；如果有任何一个 key 的值不同，就会 render。

官方文档

注意

React.PureComponent 中的 shouldComponentUpdate() 仅作对象的浅层比较。如果对象中包含复杂的数据结构，则有可能因为无法检查深层的差别，产生错误的比对结果。

仅在你的 props 和 state 较为简单时，才使用 React.PureComponent。


render

用途：

展示视图 return (<div> ... </div>)，只能有一个根元素。

两个根元素，要用 <React.Fragment> 包起，可以缩写为 <> </>

技巧：

render 里面可以写 if...else、?:表达式

不能直接写 for循环，需要用数组

render 里面可以写 aray.map（循环）

class App extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      n: 1,
      array: [1, 2, 3]
    };
  }
  onClick = () => {
    this.setState((state) => ({ n: state.n + 1 }));
  };
// if...else
  render() {
   let message
   if(this.state.n%2 === 0){
     message = <span>偶数</span>
   }else{
     message = <span>奇数</span>
   }
   return(
     <React.Fragment>
     {message}
     <button onClick={this.onClick}>+1</button>
     </React.Fragment>
   )
  }
// ? :
  render() {
    return (
      <>
        {this.state.n % 2 === 0 ?
        <span>偶数</span> :
        <span>奇数</span>}
        <button onClick={this.onClick}>+1</button>
      </>
    );
  }
// for 循环
  render() {
    let result = [];
    for (let i = 0; i < this.state.array.length; i++) {
      result.push(this.state.array[i]);
    }
    return result;
  }
// for 循环 map()
render() {
    return this.state.array.map((n) => <span key={n}>{n}</span>);
  }
}

componentDidMount()

用途：

在元素插入页面后执行代码，这些代码依赖 DOM

比如，想获取 div 的高度，最好在这里写。

此处可以发起加载数据的 Ajax 请求（官方推荐）

首次渲染 会执行此钩子

官方文档

// 想获取 div 的高度
...
componentDidMount(){
  const div = document.querySelector('#xxx');
  const {width} = div.getBoundingClientRect()
  this.setState({width})
}
render() {
  return(
    <div id='xxx'>hello, width, {this.state.width}px</div>
  )
}

改用 ref

class App extends React.PureComponent {
  divRef = undefined;
  constructor(props) {
    super(props);
    this.state = {
      n: 1,
      width: undefined,
    };
    this.divRef = React.createRef();
  }

  onClick = () => {
    this.setState((state) => ({ n: state.n + 1 }));
  };

  componentDidMount() {
    const div = this.divRef.current;
    const { width } = div.getBoundingClientRect();
    this.setState({ width });
  }

  render() {
    return <div ref={this.divRef}>hello, width: {this.state.width}px</div>;
  }
}

ref 官方文档


componentDidUpdate()

用途：

在视图更新后执行。第一次渲染不执行。

此处也可以发起 Ajax 请求，用于更新数据 （文档）。

首次渲染不会 执行此钩子。

在此处 setState 可能会引起无限循环，除非放在 if 里。

若 shouldComponentUpdate 返回 false，则不会触发此钩子。


componentWillUnmount()

用途：

组件将要 被移出页面 然后被销毁 时执行代码

unmount 过的组件不会再次 mount

举例：

  • 如果你在 c…DidMount 里面监听了 window scroll

    那么你就要在 c…WillUnmount 里面取消监听

  • 如果你在 c…DidMount 里面创建了 Timer

    那么你就要在 c…WillUnmout 里面取消 Timer

  • 如果你在 c…DidMount 里面创建了 Ajax 请求

    那么你就要在 c…WillUnmount 里面取消请求

  • 否则你就是菜逼。

官方文档


生命周期回顾

  • constructor() - 在这里初始化 state

  • shouldComponentUpdate() - return false 阻止更新

  • render() - 创建虚拟 DOM

  • componentDidMount() - 组件已出现在页面

  • componentDidUpdate() - 组件已更新

  • componentWillUnmount() - 组件将死

drwna
关注
专栏目录
React组件——类组件
m0_58471238的博客
01-15 6790
React组件——类组件
React 类组件和函数组件
baidulixueqin的博客
04-19 5116
React 类组件和函数组件 目录 1.类组件和函数组件 2.如何使用 props 和 state 3.如何绑定事件 4.复习 this+ 两个面试题 组件component 一.概念 Element VS Component (元素与组件) //不成文的约定:元素小写，组件大写 const div=React.createElement('div',...) 这是一个React元素(小写) const Div=()=>React.createElement('div',...) 这是一个Rea
React学习笔记（二）——React 组件
weixin_56370772的博客
09-15 1127
了解 React 组件作用，和创建组件的方式组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。将页面按照界面功能进行拆分，每一块界面都拥有自己的独立逻辑，这样可以提高项目代码的可维护性。使用函数function使用类class掌握类组件中状态的定义与使用定义state属性定义组件状态，属于组件自己的数据，它的值是个对象。使用state的时候通过this。数据发生变化，驱动视图更新。super()// 给 this 增加一个属性 state。
React类式组件
qq_44850230的博客
04-21 601
//1. 创建类式组件 class MyComponent extends React.Component{ //render时放在哪里的？ MyComponent的原型对象上 //render中的this指向？MyComponent的实例对象 = MyComponent组件实例对象 render(){ console.log('render中的this',this); ..
React组件三大类：类组件、函数组件、高阶组件
你若盛开，清风自来
07-15 1657
本文将详细介绍React中的类组件、函数组件和高阶组件，帮助读者理解它们的概念、使用场景和优势，以便在实际项目中合理选择和使用。类组件、函数组件和高阶组件是React中三种常见的组件类型，它们各自具有独特的特点和优势。掌握这三种组件类型的使用方法，可以根据实际需求在项目中合理选择和使用。
React类组件
qq_51130780的博客
07-06 978
类组件的使用
Hookd:cli工具和可视化工具，用于通过钩子将React类组件转换为功能组件
05-02
cli工具，用于通过钩子将React类组件转换为功能组件。 我们有两个NPM模块可供使用： 是我们的模块 是我们的cli工具 Hookd将使用新转换的文件创建一个/hookd目录 巴别塔 Babel将是解析遍历和生成新代码的主要工具。...
react-refactor:将您的React类组件转换为功能组件，反之亦然
04-28
多亏了React Refactor，您可以将任何React组件与Class组件相互转换。 它是由Babel Babylon制成的，而且由于替换了字符串，它能够立即将您的组件转换为您提供的另一种组件。 React Refactor提供三种不同的软件包：...
babel-plugin-transform-react-class-to-function：Babel 7插件，可将React组件类转换为函数
01-31
Babel 7插件，可将React组件类转换为函数 使用类语法编写React组件有几个好处： 一致性—使用相似的语法定义所有组件。 静态属性-使用静态类属性时，组件更加独立。 比较简单的差异-无需更改在类和函数之间转换...
react 类组件
weixin_45677987的博客
05-27 252
1：react 类组件 // 准备一个容器 <div id="test"></div> 类总结: 1: 类中的构造方法不是必须写的, 要对实力进行一些初始化操作采写。 2: 如果A类继承B类， 并且A类中写了构造器, A类构造器必须写super() 方法 3：类中定义的方法, 都是放在类中原型上了, 提供实例去使用 4: 在继承中, 如果子类使用方法没有在子类原型上查找到， 就会通过原型链向父级查找 ----------------------------------
【react】类组件
bbt953的博客
03-08 348
类组件
React组件
gy99csdn的博客
01-06 1679
组件是React中最基本的内容，使用React就是在使用组件组件表示页面中的部分功能多个组件可以实现完整的页面功能组件特点：可复用，独立，可组合。
【React】React 组件
Jessieeeeeee的博客
06-24 1457
React 组件
【React】类组件和函数组件
最新发布
小秀的博客
10-06 1313
react 还有一些特性，jsx 语法、单向数据流（react 本身来说 props 只能通过父组件向子组件传输，不能反过来修改，便于对数据的控制）、虚拟 DOM（diff、patch，高效操作 DOM）、声明式编程、Component（一切皆为组件）props 是只读的，但是 this 是可变的（可以在 render 和生命周期读取最新值），所以如果组件在请求运行时更新，类组件 this.props 可以获取最新的值，而 函数组件 props 仍是旧值（函数组件本身不存在 this）。
React 类组件你不知道的细节+案例
小陈的博客
01-11 597
最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
react类组件
05-24
它们是使用ES6类语法创建的，继承了React组件类。类组件可以包含状态(state)和生命周期方法(lifecycle methods)，并且可以与其他组件进行交互。下面是一个简单的React类组件的例子： ```jsx import React, { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值