react基础03--render渲染、组件生命周期、组件通信

最新推荐文章于 2024-04-07 22:02:56 发布
最新推荐文章于 2024-04-07 22:02:56 发布
阅读量759 收藏 3
点赞数
分类专栏： web 前端 文章标签： javascript React render渲染 组件生命周期 组件通信
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011127242/article/details/122273991
版权

react基础03--render渲染、组件生命周期、组件通信

1 介绍

react基础02–基础函数&自定义函数组件&属性 中介绍了组件基础函数、自定义函数组件的方法，以及如何设置组件属性。本文在其基础上继续介绍，render渲染、组件生命周期函数、组件通信等常用的方法概念，并配以实际案例。

2 方法&案例

2.1 render 方法

vim index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App02</title>
  </head>
  <body>
    <div id="root">
    </div>
</body>
</html>

通过函数的方式使用
vim index.js

import React from 'react'; // 只要js中引 入了Reat模块，就可以直接写HTML
import ReactDOM from 'react-dom';
import App from './App'

var myapp = new App();
myapp.i = 2 

ReactDOM.render(<div>hello, {myapp.m()}</div>, document.getElementById('root'));

vim App.js

import React from "react";

class App extends React.Component {
    constructor(){
        super();
        console.log('构造方法执行')
        this.i = 0;
    }

    m(){
        return (
            <h1> this is APP Component, i={this.i}</h1>
        )
    }
}
export default App

结果：
在这里插入图片描述
通过组件的方式使用
vim index.js

import React from 'react'; // 只要js中引 入了Reat模块，就可以直接写HTML
import ReactDOM from 'react-dom';
import App from './App'

ReactDOM.render(<div>hello, <App i={3*3} mesg="word" /></div>
  , document.getElementById('root'));

vim App.js

import React from "react";
class App extends React.Component {
    constructor(){
        super();
        console.log('构造方法执行')
    }

    render(){
        return (
            <h1> this is APP Component, i={this.props.i},mesg={this.props.mesg}</h1>
        )
    }
}
export default App

结果:
在这里插入图片描述
注意：
App 继承 React.Component， 该组件有 props，因此可以直接使用 props;
props 是 readonly 类型的，不可以对其进行修改。

2.2 state 状态更新

默认不保存状态
vim index.js

import React from 'react'; // 只要js中引 入了Reat模块，就可以直接写HTML
import ReactDOM from 'react-dom';
import App from './App'

ReactDOM.render(<div>hello, <App i={3*3} mesg="word" /></div>
  , document.getElementById('root'));

vim App.js

import React from "react";

class App extends React.Component {
    constructor(){
        super();
        this.name = "tom"
    }

    render(){
        return (
            <div>
                this is App Component: {this.name}
                <p>
                    <button onClick={this.click.bind(this)}>按钮</button>
                </p>
            </div>
        )
    }

    click(){
        this.name = 'lily'
        console.log(this.name)
    }
}
export default App

结果：
如下图，点击后控制台输出lily， 但是前端页面仍然为 tom，即数据没有被更新
在这里插入图片描述
通过state保存状态
vim App.js

import React from "react";

class App extends React.Component {
    constructor(){
        super();
        this.state = {
            name: "tom",
            age: 10
        }
    }

    render(){
        return (
            <div>
                this is App Component: {this.state.name}
                <p>
                    <button onClick={this.click.bind(this)}>按钮</button>
                </p>
            </div>
        )
    }

    click(){
        // 视图更新
        this.setState({name: 'lily'})
        console.log(this.state.name)
    }
}
export default App

结果：
初次启动的时候 name 为tom，单击 button 后 会保存状态，并更新组件中name为 lily。
初次启动：
在这里插入图片描述
单击两次button：
在这里插入图片描述

2.3 生命周期函数

react 组件生命周期可以大致分为三类，包括 Mounting（加载阶段）、Updating（更新阶段）和Unmounting（卸载阶段），每个阶段都会工具特定状态执行一系列函数。
以下案例中验证了默认状态下执行的主要函数、组件更新条件下的执行主要函数。
vim App.js

import React from "react";

class App extends React.Component {
    constructor(){
        super();
        this.state = {
            name: "tom",
            age: 10
        }
        console.log('constructor...')
    }
    UNSAFE_componentWillMount(){
        console.log('componentWillMount...')
    }
    componentDidMount(){
        console.log('componentDidMount...')
    }
    UNSAFE_componentWillUpdate(){
        console.log('componentWillMount...')
    }
    componentDidUpdate(){
        console.log('componentDidUpdate...')
    }

    render(){
        console.log('render...')
        return (
            <div>
                this is App Component: {this.state.name}
                <p>
                    <button onClick={this.click.bind(this)}>按钮</button>
                </p>
            </div>
        )
    }

    click(){
        // 视图更新,异步函数
        this.setState({name: 'lily'}, ()=>{
            console.log('setState()回调函数...')
        })
        console.log('click...')
    }
}
export default App

结果：
如下图，正常情况下依次执行 constructor… -》componentWillMount… -》 render… -》 componentDidMount…
当单击按钮后，执行 click… -》componentWillMount… -》 render… -》 componentDidUpdate… -》 setState() ，可见更新视图是异步操作
在这里插入图片描述

如果设置 shouldComponentUpdate(){return false} 那么点击click 后将不会更新视图。

Update on Async Rendering 提到 17.0: 将会移除 componentWillMount, componentWillReceiveProps, and componentWillUpdate . (只有新的 “UNSAFE_” 生命周期函数可用)

2.4 组件通信

react 中父子组件可以通过值的方式传参数，父组件通过 props 传参数给子组件，子组件可以通过执行父组件传入的函数来和父组件交互数据。
vim index.js

import React from 'react'; // 只要js中引 入了Reat模块，就可以直接写HTML
import ReactDOM from 'react-dom';
import Demo from './Demo'

ReactDOM.render(<div><Demo/></div>, document.getElementById('root'));

vim App.js

import React from "react";
class App extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            name: "tom",
            age: 10
        }
    }
    render(){
        return (
            <div>
                <hr/>
                this is App Component: {this.state.name}
                <br/>
                <button onClick={this.click.bind(this)}>App's button</button>
            </div>
        )
    }
    click(){
        this.props.mesg(this.state.name)
    }
}
export default App

vim Demo.js

import React, { Component } from 'react'
import App from './App'

export default class Demo extends Component {
    constructor(){
        super();
        this.state = {
            msg: 'demo'
        }
    }
    m(str){
        this.setState({msg: str})
        console.log('m...'+str)
    }
    render() {
        return (
            <div>
                <h1>this demo's Component, msg={this.state.msg}</h1>
                <App mesg={this.m.bind(this)}/>
            </div>
        )
    }
}

结果：
默认情况下 msg=demo
在这里插入图片描述
单击 button 后，子组件 App 通过函数调用的方式将 msg 更改为 tom
在这里插入图片描述

3 注意事项

  1. 对于前端单击按钮操作，需要将其动作绑定到当前组件，否则会出现 App.js:25 Uncaught TypeError: Cannot read properties of undefined (reading ‘setState’) 的错误
  2. 对于数据状态更新的，需要通过 this.setState() 方法来更新。
  3. vscode 中安装 es7 组件后，可以通过 rcc rce rpc 等快捷方式生成基础代码
    具体信息可以参考: ES7 React/Redux/GraphQL/React-Native snippets

4 说明

React基础入门+综合案例
react 官网
React基础入门教程
React组件的生命周期函数
React组件通信（父子组件传值）

昕光xg
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
react-react面试题之提高组件的渲染效率.zip
03-20
在React开发中，提高组件的渲染效率是优化应用性能的关键环节。React通过虚拟DOM（Virtual DOM）技术，使得UI更新更加高效，但仍然需要开发者掌握一些策略来避免不必要的渲染，从而提升性能。以下是一些核心知识点，...
React中的render()
热门推荐
Han_Zhou_Z的博客
03-07 1万+
一、React中的render() 1、render()：是 class 组件中唯一必须实现的方法 2、当 render 被调用时，它会检查 this.props 和 this.state 的变化并返回以下类型之一： （1）React 元素。通常通过 JSX 创建。例如，<div /> 会被 React 渲染为 DOM 节点，<MyComponent /> 会被 React 渲染为自定义组件，无论是 <div /> 还是 <MyComponent /&g
react render 的原理和触发时机
sadasddpk的博客
01-16 5037
理解react的render函数，要从这三点来认识。原理、执行时机、总结。 一、原理 在类组件和函数组件中，render函数的形式是不同的。 在类组件中render函数指的就是render方法；而在函数组件中，指的就是整个函数组件。 classFooextendsReact.Component{ render(){ //类组件中 return<h1>Foo</h1>; } ...
面试官：说说React render方法的原理？在什么时候会被触发？
weixin_44475093的博客
07-26 1402
一、原理首先，render函数在react中有两种形式：在类组件中，指的是render方法：classFooextendsReact.Component{ render()...
React性能优化（以及React的render过程）
chiuwingyan的博客
05-05 1249
前言在了解React的性能优化之前，首先要对React的render过程有了解。Render对React有了解的都知道，render的渲染分为初始化渲染和更新渲染。初始化渲染就是在页面初始化的时候调用根组件下所有组件的render方法，如下图，一个DOM树表示根组件与各组件之间的联系，绿色是代表已经渲染的。现在讲的这种情况，如果我们只需要对某一个子组件进行更新，如图绿色代表的是需要更新的子组件：而...
React生命周期深度完全解读
grooyo的博客
10-03 413
render 阶段、commit 阶段。只有 class 组件才有生命周期，因为 class 组件会创建对应的实例，而函数组件不会。组件实例从被创建到被销毁的过程称为。由 class 组件创建的实例具有生命周期，它的 render 函数在 render 阶段执行，并在此阶段进行 DOM 节点的 diff（diff 算法就是在此阶段进行的），找出需要改变的 DOM 操作。然后在 commit 阶段将对应的 DOM 操作提交至视图中。
React读书笔记-组件的生命周期1
08-08
组件的生命周期方法是React提供的一系列特殊方法，用于在组件的不同阶段执行特定的操作。了解并熟练掌握这些生命周期方法对于优化性能和处理复杂逻辑至关重要。 首先，我们可以从组件的创建开始。在ES5语法中，我们...
前端开源库-react-addons-pure-render-mixin
08-29
它会在组件的`shouldComponentUpdate`生命周期方法中自动比较当前的props和state与上一次的props和state是否发生了实质性变化。如果比较结果表明没有变化，那么组件就不会进行重新渲染，从而节省了计算资源和DOM操作...
react-使用简单的组件测量使用控件的React渲染生命周期
08-15
"react-使用简单的组件测量使用控件的React渲染生命周期"这一主题旨在帮助开发者通过创建简单的组件来追踪和分析React组件在不同生命周期方法中的行为，从而提升应用的性能。 React组件的生命周期可以分为三个主要...
React-Native 组件之 Modal的使用详解
08-29
在组件中，我们还使用了 onRequestClose、onShow、onOrientationChange 等回调函数来处理 Modal 的生命周期事件。 Modal 组件是 React-Native 中一个非常重要的组件，它可以用来实现遮罩的效果，并提供了多种自定义...
react中写动态标签，render方法中如何使用if else 判断
01-07
在render()中循环数据，根据数据不同展示标签不同 import React from 'react'; const quanList=[ { id:1, buy_price:1,//购买券的价格 quan_price:30,//可抵扣价格 quanName:'仅限(学习机)商品使用', on_time:'2020-11-01', off_time:'2020-11-30', isHave:false, },
React之render
Ming_xm的博客
10-23 445
render函数里面可以编写JSX，转化成这种形式，用于生成虚拟DOM，最终转化成真实DOM在React中，类组件只要执行了setState方法，就一定会触发render函数执行，函数组件使用useState更改状态不一定导致重新render组件的props改变了，不一定触发render函数的执行，但是如果props的值来自于父组件或者祖先组件的state在这种情况下，父组件或者祖先组件的state发生了改变，就会导致子组件的重新渲染所以，一旦执行了setState就会执行render方法，
【 React 】React render方法的原理？在什么时候会被触发？
qq_21087199的博客
03-18 716
在render过程中，React将新调用的render函数返回的树与旧版本的树进行比较，这一步是决定如何更新DOM的必要步骤，然后进行diff比较，更新DOM树*
React render 方法的原理
最新发布
Chloeeeeeeee的博客
04-07 441
在 React 中，类组件只要执行了 setState 方法，就一定会触发 render 函数执行，函数组件使用 useState 更改状态不一定导致重新 render。
react Render机制
LittleMoon_lyy的博客
01-28 1126
react Render机制
React学习：React中render的用法
weixin_42232418的博客
08-15 1万+
原文链接：https://www.jianshu.com/p/00226a584eff React中render的用法： 一个组件类必须要实现一个render方法，这个方法必须要返回一个jsx元素。必须要用一个外层的jsx元素把所有的内容包裹起来，返回并列的多个jsx元素是不合法的。 错误的写法： render () { return ( <div>第一个</div> &l...
React render流程解析
schooling_chan的博客
09-12 474
学习react源码首先从react入口函数开始学习，这篇文章你将学习到如何进行调试代码和学会react render执行流程。 调试代码 这里只是进行简单的流程介绍，具体的可以看卡颂老师的拉取源码教程 # 拉取代码 git clone https://github.com/facebook/react.git # 执行打包命令 yarn build react/index,react/jsx,react-dom/index,scheduler --type=NODE # 通过yarn link改变依赖包
React render 的原理和触发时机
zz130428的博客
12-09 726
render函数里面可以编写JSX，转化成createElement这种形式，用于生成虚拟DOM，最终转化成真实DOM在React 中，类组件只要执行了 setState 方法，就一定会触发 render 函数执行，函数组件使用useState更改状态不一定导致重新render组件的props 改变了，不一定触发 render 函数的执行，但是如果 props 的值来自于父组件或者祖先组件的 state在这种情况下，父组件或者祖先组件的 state 发生了改变，就会导致子组件的重新渲染。
【React】循环渲染组件
AcongMiss的博客
03-31 2777
class InputGroup extends React.Component { state = { fileList: [{ name: 'xxx.png', status: 'done', }], }; render() { const { fileList } = this.state; const inputPil...
react组件生命周期函数
09-13
React 组件生命周期函数可以分为三个阶段：挂载阶段、更新阶段和卸载阶段。以下是这些生命周期函数的详细解释： 1. 挂载阶段： - constructor: 组件实例化时调用，用于初始化状态和绑定方法。 - static ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

昕光xg

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值