上期讲了state,接下来讲讲props。props功能在于组件间通信(父子组件),首先说说在各种组件中的用法:

类组件

//父组件传值
class Father extends React.PureComponent{
    render(){
        return (
            <Son value={"son"} />
        )
    }
}

class Son extends React.PureComponent{
    render(){
        return (
            <div>this data is {this.props.value}</div>
        )
    }
}

函数组件

function Fa(){
    return (
        <Son value={"son"} />
    )
}

function Son(props){
    return (
        <div>this data is {props.value}</div>
    )
}

在函数组件中,props只需要传一个值就好了,非常方便 在React文档中,对props的解释是

当 React 元素为用户自定义组件时,它会将 JSX 所接收的属性(attributes)以及子组件(children)转换为单个对象传递给组件,这个对象被称之为 “props”

所以,我们通过props能得到父类组件上传的值,也能通过props.children直接得到jsx写成的子组件

props是只读的

React在文档中强调

所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

纯函数的概念我们已经在redux中解释过了,总而言之,我们不能改变props的值。

组件间通信

现在来总结一下组件间通信:

  • props 首先上一个类组件的写法:
//父组件给子组件传值以及说过了,现在总结子组件给父组件传值,此时往往需要父组件给子组件先传一个props函数,子组件通过调用传入的函数传值改变父组件的值
export default class Fa extends Component {
    state = {faValue:'Fa1'}

    changeFa = (value)=>{
        this.setState(()=>{
            return {faValue:value}
        })
    }
    render() {
        return (
            <>
                <h1>Fa's value is {this.state.faValue}</h1>
                <Son changeFa={this.changeFa}/>
            </>
        )
    }
}

export default class Son extends React.PureComponent{

    changeValue = ()=>{
        this.props.changeFa(this.inputRef.value)
    }
    render() {
        return (
            <>
                <input type="text" placeholder={"请输入您的值"} ref={(el)=>{this.inputRef = el}}/>
                <button onClick={this.changeValue}>change</button>
            </>
        )
    }
}

然后写一个函数组件的写法:

function Fa(){
    const [faValue,setFaValue] = useState("Fa1")

    const changeFa = (value)=>{
        setFaValue(value)
    }
    return (
        <div>
            <h1>Fa's value is {faValue}</h1>
            <Son changeFa={changeFa} />
        </div>
    )
}

function Son(props){
    const inputValue = useRef("")
        //定义改变fa组件的值的函数
        const changeFaValue = ()=>{
            props.changeFa(inputValue.current.value)
        }
        return (
            <>
                <input type="text" placeholder={"请输入您要改变的值"} ref={inputValue}/>
                <button onClick={changeFaValue}>change value</button>
            </>
        )
}
  • eventbus(订阅-发布机制)

这个可以理解为弱化的redux。这边我们用库pubsub-js来写。写法如下:

//比如针对之前的输入案例,我需要给兄弟组件传一个值value,如果不用props,我们该怎么写
Bro:
export default class Bro extends Component {

    componentDidMount() {
        this.sonData =  PubSub.subscribe("brother",(msg,data)=>{
            console.log("Bro Component have recived the msg",data);
        })
    }

    componentWillUnmount() {
        PubSub.unsubscribe(this.sonData)
    }

    render() {
        return (
            <>
                <div>brother</div>
            </>
        )
    }
}
Son:
export default class Son extends React.PureComponent{

    changeValue = ()=>{
        PubSub.publish("brother",this.inputRef.value)
    }

    render() {
        return (
            <>
                <input type="text" placeholder={"请输入您的值"} ref={(el)=>{this.inputRef = el}}/>
                <button onClick={this.changeValue}>change</button>
            </>
        )
    }
}

这个方法常用的就是三个api,第一个subscribe,发布的相应的事件,并且定义事件要做什么事。第二个是publish,订阅发布的事情,并且传入相应要改变的值。第三个是unsubscribe用来取消发布的事情,做内存的优化

以上就是React三大属性之props的使用详解的详细内容,更多关于React三大属性之props的资料请关注程序员的世界其它相关文章!

React三大属性之props的使用详解的更多相关文章

  1. jQuery中toggle与slideToggle以及fadeToggle的显示、隐藏方法的比较

    1、区别 ①动画效果的比较: toggle:直接显示、隐藏,如果有【时间参数】且【匹配的元素有宽度属性】,则动态效果为左上角-右下角拉卷效果,透明度0-1之间的变化;若有时间参数但是【匹配的元素没有宽度属性】,则动态效果为上下拉卷的效果,且没有透明度的变化。 slideToggle:切换上下拉卷滚效......

  2. 详解cocoscreater预制体prefab

    预制体prefab什么是预制体,字面意思,还未使用前预先制作好的节点资源,属性等同于普通节点,可以看做一个预先制作还没展示出来的普通的节点怎么创建预制体1.在层级管理器处先创建普通的节点,然后把这个节点拖拽到资源管理器的assets文件夹下,出于方便管理会统一建立一个Prefab文件夹下统一存放预制......

  3. 前端 javascript 实现文件下载的示例

    在 html5 中,a 标签新增了 download 属性,包含该属性的链接被点击时,浏览器会以下载文件方式下载 href 属性上的链接。示例:下载1. 前端 js 下载实现与示例通过 javascript 动态创建一个包含 download 属性的 a 元素,再触发点击事件,即可实现前端下载。代码......

  4. 【机制】js的闭包、执行上下文、作用域链

    1.从闭包说起什么是闭包一个函数和对其周围状态(词法环境)的引用捆绑在一起,这样的组合就是闭包。也就是说,闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中,每当创建一个函数,闭包就会在函数创建的同时被创建出来。上面是MDN对闭包的解释,这几句话可能不太好懂,没关系,......

  5. js实现简单商品筛选功能

    本文实例为大家分享了js实现商品筛选功能的具体代码,供大家参考,具体内容如下应用场景:商品筛选Document* {margin: 0;padding: 0;list-style: none;text-decoration: none;}.choose {width: 500px;height: a......

  6. CocosCreator通用框架设计之网络

    前言在 Cocos Creator 中发起一个 http 请求是比较简单的,但很多游戏希望能够和服务器之间保持长连接,以便服务端能够主动向客户端推送消息,而非总是由客户端发起请求,对于实时性要求较高的游戏更是如此。这里我们会设计一个通用的网络框架,可以方便地应用于我们的项目中。使用websocket......

  7. JavaScript实现颜色查看器

    本文实例为大家分享了JavaScript实现颜色查看器的具体代码,供大家参考,具体内容如下实现效果方框中初始为白色输入框中输入颜色代码,点击查看颜色,在上方即可出现对应颜色点击复原,复原到初始的白色,同时清空输入框的内容实现代码<!DOCTYPE html><html lang=&......

  8. jQuery实现影院选座订座效果

    jQuery实现影院选座订座效果,供大家参考,具体内容如下效果如下:代码如下:<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport......

  9. JS数组去重的九种高阶方法(亲测有效)

    前言一般的方法此处也不列举了,还是有很多的,如双层循环判断是否相等,或新建数组比较再push等等,需要注意的是,使用splice方法移除元素时,有可能会导致数组塌陷问题,需要处理一下本文中介绍了多种数组去重的方法,使用了较多的高阶方法及API,并给出相应解释及语法,还有其他多种组合调用方式,原理逻辑......

  10. javascript脚本何时会被执行

    javascript脚本可以嵌入在html内的任意地方,但它何时被调用呢?当浏览器打开HTML文件后,会直接运行不是声明函数的脚本或通过事件调用脚本函数,下面分析这几种情况。1.浏览器在打开页面时执行脚本当浏览器打开一个HTML文件时,它会从头开始解释整个文件,包括html标签和脚本。如果脚本中有可......

随机推荐

  1. 如何保存Unity中的Log日志

    代码中的debug日志保存本地using System.Collections;using UnityEngine;using System.IO; public class SaveLog : MonoBehaviour{private float length;Queue queue;priva......

  2. Python3使用tesserocr识别字母数字验证码的实现

    一、背景最近有个需求是从一个后台的留言网站爬取留言数据,后台管理网站必然涉及到了登录,登录就有个验证码的问题必须得解决,由于验证码是从后端生成的,并且不了解其生成规则,那就只能通过图像识别技术来做验证码识别了!通过查阅资料发现Python中的的tesserocr这个库好像使用的比较多,所以对这个库进......

  3. Linux中自定义shell脚本启动jar包的方法

    一键启动、停止、重启 java项目创建.sh文件vi XXX.sh编写shell脚本#!/bin/shport=8080 #定义变量等号左右不能有空格jar_name=/opt/oaclou/XXX.jar#运行脚本提示信息tips(){echo "--------------------......

  4. 详解Pymongo常用查询方法总结

    Python 直接连接mongodb数据库进行查询操作1、安装所需模块使用到的是pymongo模块,安装方法:pip install pymongo2、环境验证3、连接数据库import pymongodef operating_mongodb():client = pymongo.MongoC......

  5. 利用ajax+php实现商品价格计算

    本文实例为大家分享了商品价格计算的具体代码,利用ajax和php实现以下页面index.php<!DOCTYPE html><html><head><meta charset="utf-8" /><title>商品价格计......

  6. C# Twain协议调用扫描仪,设置多图像输出模式(Multi image output)

    Twain随着扫描仪、数码相机和其他图像采集设备的引入,用户热切地发现了将图像整合到他们的文档和其他工作中的价值。然而,支持这种光栅数据的显示和操作成本很高,应用程序开发人员需要创建用户界面并内置设备控制各种各样可用的图像设备。一旦他们的应用程序准备好支持给定的设备,他们就会面临一个令人沮丧的现实:......

  7. 正确的理解和使用Django信号(Signals)

    Django 提供一个了“信号分发器”机制,允许解耦的应用在框架的其它地方发生操作时会被通知到。 通俗而讲Django信号的工作原理就是当某个事件发生的时候会发出一个信号(signals), 而监听这个信号的函数(receivers)就会立即执行。Django信号的应用场景很多,尤其是用于不同模......

  8. MySQL too many connections错误的原因及解决

    今天中午,开发测试环境的MySQL服务报了一个too many connections的错误,从问题上看,可能是连接池被打满了,导致所有的连接都不可用了。 在这种情况下,最为直接的办法就是重新设置最大连接数,查看my.cnf文件,里面关于连接数的参数有两个,分别是:max_connect......

  9. python基于OpenCV模板匹配识别图片中的数字

    前言本博客主要实现利用OpenCV的模板匹配识别图像中的数字,然后把识别出来的数字输出到txt文件中,如果识别失败则输出“读取失败”。操作环境:OpenCV - 4.1.0Python 3.8.1程序目标单个数字模板:(这些单个模板是我自己直接从图片上截取下来的)要处理的图片:终端输出:文本输出:思......

  10. python常见题型

    语言特性1. 谈谈对 Python 和其他语言的区别2. 简述解释型和编译型编程语言3. Python 的解释器种类以及相关特点?4. Python3 和 Python2 的区别?5. Python3 和 Python2 中 int 和 long 区别?6. xrange 和 range 的区别?编......