React学习二

最新推荐文章于 2024-06-26 22:15:37 发布
最新推荐文章于 2024-06-26 22:15:37 发布
阅读量169 收藏
点赞数
分类专栏： react javascript 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tokisaki_Kurumi/article/details/119807700
版权

组件通信

在函数组件中通过接收props参数可以直接获取传入的状态
在类组件中使用this.props获取
props可以传递任意状态、jsx语法、函数等等

import React from "react";
import ReactDOM from 'react-dom'

// const Hello = props => {
//     return (
//         <div>
//             <h1>props： {props.name}</h1>
//         </div>
//     )
// }

// class Hello extends React.Component {
//     render() {
//         return (
//             <div>
//                 <h1>props： { this.props.name }</h1>
//             </div>
//         )
//     }
// }

class Hello extends React.Component {
    constructor(props) {
        super(props);
        console.log(props)
    }
    render() {
        return (
            <div>
                <h1>props： { this.props.name }</h1>
            </div>
        )
    }
}
ReactDOM.render(<Hello name='jack' age={19}/>,document.getElementById('root'))

父传子

import React from "react";
import ReactDOM from 'react-dom'

class Parent extends React.Component {
    state = {
        lastName:'王'
    }

    render() {
        return (
            <div className='parent'>
                父组件
                <Child name={ this.state.lastName }/>
            </div>
        )
    }
}
const Child = (props) => {
    return (
        <div className='child'>
            <p>子组件，接收到父组件的数据:{ props.name }</p>
        </div>
    )
}
ReactDOM.render(<Parent/>,document.getElementById('root'))

子传父

子传父需要在父组件定义一个方法，再将这个方法传给子组件，子组件调用这个方法，同时把状态作为实参传入父组件的方法，父组件就可以拿到传入的状态了

import React from "react";
import ReactDOM from 'react-dom'

class Parent extends React.Component {
    getChildMsg = data => {
        alert(data)
    }
    render() {
        return (
            <div className='parent'>
                父组件
                <Child getMsg={ this.getChildMsg }/>
            </div>
        )
    }
}
class Child extends React.Component {
    state = {
        msg:'Battle cruise'
    }
    handleClick = () => {
        this.props.getMsg(this.state.msg)
    }
    render() {
        return (
            <div className='child'>
                子组件：<button onClick={this.handleClick}>点我，给父组件传递数据</button>
            </div>
        )
    }
}

ReactDOM.render(<Parent/>,document.getElementById('root'))

兄弟通信

兄弟通信是使用的状态提升方法，通过共同的父组件作为中间交换状态。

import React from "react";
import ReactDOM from 'react-dom'

class Counter extends React.Component {
    state = {
        count:0
    }
    onIncrement = () => {
        this.setState({
            count:this.state.count + 1
        })
    }
    render() {
        return (
            <div>
                <Child1 count={this.state.count}/>
                <Child2 onIncrement={this.onIncrement}/>
            </div>
        )
    }
}

const Child1 = (props) => {
    return <h1>计数器:{props.count}</h1>
}
const Child2 = (props) => {
    return <button onClick={()=>props.onIncrement()}>+1</button>
}

ReactDOM.render(<Counter/>,document.getElementById('root'))

Context通信

本质上是使用的props的children方法实现的，通过React.createContext()方法获取Provider 和 Consumer 。给传出数据的组件渲染函数外套上并传入value数据。
在传入数据的组件渲染函数里使用，在内部使用函数形参接受传入的数据并使用

import React from "react";
import ReactDOM from 'react-dom'

const { Provider ,Consumer } = React.createContext()

class App extends React.Component {
    render() {
        return (
            <Provider value='pink'>
                <div className='app'>
                    <Node/>
                </div>
            </Provider>
        )
    }
}
const Node = prop => {
    return (
        <div className='node'>
            <SubNode/>
        </div>
    )
}
const SubNode = props => {
    return (
        <div className='subnode'>
            <Child/>
        </div>
    )
}
const Child = props => {
    return (
        <div className='child'>
            <Consumer>
                {
                    data => <span>我是子节点 -- { data }</span>
                }
            </Consumer>
            我是子节点
        </div>
    )
}
ReactDOM.render(<App/>,document.getElementById('root'))

props中children

render函数中组件双标签中传入内容，组件可以使用props.children或者this.props.children获取传入的内容

import React from "react";
import ReactDOM from 'react-dom'

// const App = props => {
//     console.log(props)
//     return (
//         <div>
//             <h1>组件标签的子节点：</h1>
//             {props.children}
//         </div>
//     )
// }
//
// ReactDOM.render(<App>我是子节点</App>,document.getElementById('root'))

const Test = () => <button>我是button组件</button>
const App = props => {
    console.log(props)
    return (
        <div>
            <h1>组件标签的子节点：</h1>
            {props.children}
        </div>
    )
}

ReactDOM.render(
    <App>
        <Test/>
    </App>,
    document.getElementById('root'))

组件生命周期

创建时

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count:0
        }
        console.log('生命周期钩子函数：constructor')
    }
    componentDidMount() {
        const title = document.getElementById('title')
        console.log(title)
        console.log('生命周期钩子函数：componentDidMount')
    }

    render() {
        console.log('生命周期钩子函数：render')
        return (
            <div>
                <h1 id='title'>统计豆豆被打的次数：</h1>
                <button id='btn'>打豆豆</button>
            </div>
        )
    }
}
ReactDOM.render(<App/>,document.getElementById('root'))

更新时

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            count:0
        }
    }
    handleClick = () => {
        // this.setState({
        //     count:this.state.count + 1
        // })

        //  强制更新
        this.forceUpdate()
    }
    render() {
        console.log('生命周期钩子函数：render')
        return (
            <div>
                <Counter count={this.state.count}/>
                <button onClick={this.handleClick}>打豆豆</button>
            </div>
        )
    }
}
class Counter extends React.Component {
    render() {
        console.log('子组件生命周期钩子函数：render')
        return (
            <h1>统计豆豆被打的次数：{this.props.count}</h1>
        )
    }
}
ReactDOM.render(<App/>,document.getElementById('root'))

更新时注意：
如果在更新时的钩子函数componentDidUpdate()中调用setState()方法，必须在条件判断中，否则会导致递归更新，报错！！

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            count:0
        }
    }

    handleClick = () => {
        this.setState({
            count:this.state.count + 1
        })

        //  强制更新
        // this.forceUpdate()
    }

    render() {
        return (`在这里插入代码片`
            <div>
                <Counter count={this.state.count}/>
                <button onClick={this.handleClick}>打豆豆</button>
            </div>
        )
    }
}

class Counter extends React.Component {
    render() {
        console.log('子组件-生命周期钩子函数：render')
        return (
            <h1 id='title'>统计豆豆被打的次数：{this.props.count}</h1>
        )
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log('子组件-生命周期钩子函数：componentDidUpdate')

        //  如果要调用setState()更新状态，必须要放在判断条件中，否则会导致递归更新报错!!
        if (prevProps.count !== this.props.count){
            this.setState({})
        }
    }
}
ReactDOM.render(<App/>,document.getElementById('root'))

组件复用

render props模式组件复用

import React from "react";
import ReactDOM from 'react-dom'

import img from './images/cat.png'

class Mouse extends React.Component {
    state = {
        x:0,
        y:0
    }
    handleMouseMove = (e) => {
        this.setState({
            x:e.clientX,
            y:e.clientY
        })
    }
    componentDidMount() {
        window.addEventListener('mousemove',this.handleMouseMove)
    }
    render() {
        return this.props.render(this.state)
    }
}
class App extends React.Component {
    render() {
        return (
            <div>
                <h1>render props 模式</h1>
                <Mouse render={(mouse)=><p>鼠标当前位置：{mouse.x},{mouse.y}</p>}/>

                <Mouse render={(mouse)=>{
                    return <img src={ img } alt="cat" style={{
                        position:'absolute',
                        top:mouse.y - 64,
                        left:mouse.x - 64,

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

使用children进行优化：

import React from "react";
import ReactDOM from 'react-dom'

import img from './images/cat.png'

class Mouse extends React.Component {
    state = {
        x:0,
        y:0
    }
    handleMouseMove = (e) => {
        this.setState({
            x:e.clientX,
            y:e.clientY
        })
    }
    componentDidMount() {
        window.addEventListener('mousemove',this.handleMouseMove)
    }
    //  组件卸载时 移除事件绑定
    componentWillUnmount() {
        window.removeEventListener('mousemove',this.handleMouseMove)
    }
    render() {
        return this.props.children(this.state)
    }
}
class App extends React.Component {
    render() {
        return (
            <div>
                <h1>render props 模式</h1>
                <Mouse>{
                    (mouse)=>{
                        return (
                            <p>鼠标当前位置：{mouse.x},{mouse.y}</p>
                        )
                    }
                }</Mouse>
                <Mouse>
                    {
                        (mouse)=>{
                            return <img src={ img } alt="cat" style={{
                                position:'absolute',
                                top:mouse.y - 64,
                                left:mouse.x - 64,
                            }}/>
                        }
                    }
                </Mouse>
            </div>
        );
    }
}
ReactDOM.render(<App/>,document.getElementById('root'))

高阶组件
高阶组件就是利用通用逻辑的组件在内部对可能存在的同时使用该逻辑的组件进行一次封装，再把它们返回出去，但是不负责渲染，而需要渲染时直接使用二次封装后的组件标签便可以实现对组件的共用。
b站这个视频讲解的不错，可以看看》》》》

import React from 'react'
import ReactDOM from 'react-dom'

import img from './images/cat.png'

//创建高阶组件
function withMouse(WrappedComponent) {
    class Mouse extends React.Component {
        state = {
            x: 0,
            y: 0
        }

        handleMouseMove = (e) => {
            this.setState({
                x: e.clientX,
                y: e.clientY
            })
        }
        componentDidMount() {
            window.addEventListener('mousemove', this.handleMouseMove)
        }

        componentWillUnmount() {
            window.removeEventListener('mousemove', this.handleMouseMove)
        }
        render() {
            return (
                <WrappedComponent {...this.state} {...this.props}/>
                // 这块对porps也进行展开是为了后续组件之间可能存在的通信
            );
        }

    }
    // 设置组件名字，方便devtools调试用
    Mouse.displayName = `withMouse${getDisplayName(WrappedComponent)}`
    return Mouse
}

function getDisplayName(WrappedComponent){
    return WrappedComponent.displayName || WrappedComponent.name || 'Component'
}


const Position = props => (
    <p>
        鼠标当前位置：(x:{props.x},y:{props.y})
    </p>
)
const Cat = props => (
    <img src={img} alt="cat" style={{
        position: 'absolute',
        top: props.y - 64,
        left: props.x - 64
    }}/>
)

const MousePosition = withMouse(Position)
const CatPosition = withMouse(Cat)

class App extends React.Component {
    render() {
        return (
            <div>
                <h1>高阶组件</h1>
                <MousePosition/>
                <CatPosition/>
            </div>
        )
    }
}
ReactDOM.render(<App/>, document.getElementById('root'))
Tokisaki_Kurumi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React学习（二）
weixin_47017090的博客
05-30 662
React组件基础1.React组件的两种创建方式1.1使用函数创建组件1.2使用类创建组件1.3抽离为独立JS文件2.React事件处理2.1事件绑定2.2事件对象 1.React组件的两种创建方式 1.使用函数创建组件 2.使用类创建组件 1.1使用函数创建组件 ·函数组件：使用JS的函数（或箭头函数）创建的组件 ·函数名称必须以大写字母开头 ·函数组件必须有返回值，表示该组件的结构 ·如果返回值为null，表示不渲染任何内容 ·渲染函数组件：用函数名作为组件标签名(组件标签可以是单标签也可以是双标签）
react-学习学习学习
02-07
二、React组件生命周期 React组件有三个主要的生命周期阶段：挂载阶段、更新阶段和卸载阶段。每个阶段都有相应的生命周期方法，如`componentDidMount`（挂载后调用）、`shouldComponentUpdate`（决定是否需要更新）...
React学习路线
警警的博客
06-26 1030
React学习路线——初级、中级和高级
React 学习笔记
weixin_41184962的博客
04-25 4345
1. react- 用于构建用户界面的javaScript 库react 是一个将数据渲染微HTML视图的开源 JavaScript库2. facebook开发，且开源3. 原生JavaScript 原生javaScript操作DOM繁琐、效率低（DOM-APL 操作 UI)。 使用javascript直接操作DOM,浏览器会进行大量的重绘重排。 原生JavaScript没有组件化编码方案，代码复用率低。4. react 特点 react 核心库和re
React学习笔记（二）
qq_45243719的博客
02-05 1842
{show && <div>是否展示
React 入门学习
m0_62118859的博客
04-21 9270
目录 1. React 介绍 2. React 特点 （1）声明式 （2）组件化 （3）一次学习，跨平台编写 3. React 脚手架 方式 1 方式 2 4. React 基本使用 5. React 创建元素练习 1. React 介绍 了解 react 的历史背景和基本概念 React起源于 Facebook 的内部项目。因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套...
react学习之路（一）
qq_41347964的博客
11-27 452
React学习手册（第二版）》学习笔记（一）
React框架的学习
Gentman_Dylan的博客
03-01 1804
前端-React框架一、环境搭建使用 create-react-app 快速构建 React 开发环境二、react目录以及文件目录结构组件基础模板三、React的知识点1.JSX语法自定义属性样式数组2.生命周期3.事件处理阻止默认行为this指向函数传参4.Context（上下文）API5.组件API设置状态:setState替换状态：replaceState设置属性：setProps替换属性：replaceProps强制更新：forceUpdate获取DOM节点：findDOMNode判断组件挂载状态
React教程（详细版）
热门推荐
Ronychen的博客
03-19 19万+
一、简介（背景） 1.1、概念 它是一个将数据渲染为HTML视图 的js库 1.2、原生js痛点 用dom的API去操作dom，繁琐且效率低 用js直接操作dom，浏览器会进行大量的回流和重绘 原生jjs没有组件化的编程方案，代码复用性低，哪怕有模块话的概念，但模块化也只能拆解一个个js，对样式和结构也没办法拆解，组件化就相当于3剑客整体拆解，成为一个个的小功能 1.3、React特点 采用组件化模式，声明式编码，提高开发效率和组件复用性 在React Native中可以用react预发进行安卓、io
react学习 新建react项目
似水流年，举重若轻
06-30 2041
一.搭建本地开发环境
react学习小记
wajueju的博客
08-05 1245
react
React学习手册.zip
07-17
本React学习手册将深入探讨React的核心概念和实战技巧，帮助你从入门到精通。 首先，React的核心概念包括组件化开发。组件是React的基础单元，可以理解为可复用的代码块，它们像乐高积木一样组合起来构建整个应用。...
react 学习笔记
11-16
React 学习笔记 React 是一个流行的前端框架，用于构建用户界面。学习 React 需要掌握其核心概念，包括组件生命周期、状态管理、事件处理等。本节笔记将记录 React 学习过程中的关键知识点。 一、React 组件生命...
react学习全家桶资料
10-16
"React学习全家桶资料"可能包含一系列的资源，旨在帮助开发者全面掌握React及其生态系统中的各种技术。以下是一些关键知识点的详细说明： 1. **React基本概念**：React允许你通过组件化的方式来构建UI，它提倡声明...
React学习手册完整版带目录.zip
06-25
"React学习手册完整版带目录.zip"包含了深入学习React所需的所有资料，包括基本概念、核心原理以及高级技巧。 首先，手册的目录可能会涵盖以下关键知识点： 1. **React基础知识**：介绍React的基本概念，如JSX语法...
分布式电网动态电压恢复器模拟装置设计与实现.doc
最新发布
07-06
本装置采用DC-AC及AC-DC-AC双重结构，前级采用功率因数校正（PFC）电路完成AC-DC变换，改善输入端电网电能质量。后级采用单相全桥逆变加变压器输出的拓扑结构，输出功率50W。整个系统以TI公司的浮点数字信号控制器TMS320F28335为控制电路核心，采用规则采样法和DSP片内ePWM模块功能实现SPWM波，采用DSP片内12位A/D对各模拟信号进行采集检测，简化了系统设计和成本。本装置具有良好的数字显示功能，采用CPLD自行设计驱动的4.3英寸彩色液晶TFT-LCD非常直观地完成了输出信号波形、频谱特性的在线实时显示，以及输入电压、电流、功率，输出电压、电流、功率，效率，频率，相位差，失真度参数的正确显示。本装置具有开机自检、输入电压欠压及输出过流保护，在过流、欠压故障排除后能自动恢复。
【无人机通信】基于matlab Stackelberg算法无人机边缘计算抗干扰信道分配【含Matlab源码 4957期】.mp4
07-06
Matlab研究室上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描视频QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
电网公司数字化转型规划与实践两个文件.pptx
07-05
电网公司数字化转型规划与实践两个文件.pptx
React Native Ruby 前后端分离系统案例介绍文档
07-06
React Native Ruby 前后端分离系统案例介绍文档
react 学习路线
09-09
2. 学习 ES6+: 掌握 ES6+ 的新特性，如箭头函数、解构赋值、模板字面量等，这些新语法可以帮助你更好地编写 React 代码。 3. React 基础: 学习 React 的基本概念，包括组件、props、state、生命周期等。可以通过...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值