传值与状态机

最新推荐文章于 2023-05-09 20:21:14 发布
最新推荐文章于 2023-05-09 20:21:14 发布
阅读量476 收藏
点赞数
分类专栏： React 从入门到砸墙 文章标签： 传值与状态机 React props传值 状态机基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39200185/article/details/100713303
版权

props

1. Props传入参数

  1. props 是组件对外的接口。使用props就可以向组件内部进行数据传递
  2. 注意：Props对于使用它的组件来说，是只读的。一旦赋值不能修改。也就是说props的值是不可变的只能在渲染的时候传入无法动态赋值。
  3. 当一个组件被注入Props 值时，属性值来源于它的父级元素，从父级到子元素。
<script src="js/react.16.8.6.js"></script>
<script src="js/react-dom.16.8.6.js"></script>
<script src="js/babel.min.js"></script>
<script src="js/prop-types.js"></script>

<div id="demodiv"></div>

<script type="text/babel">
    function Zi(props){
        return (
            <h1>我是子组件{props.text}++++++++++++{props.name}</h1>
        )
    }

    function Fu(){
        return (
            <div>
                <p>我是父组件</p>    
                <Zi text="我是调用的数据" name="我是传入的数据"/>
            </div>
        )
    }

    ReactDOM.render(<Fu/>,document.getElementById("demodiv"))
</script>

1.1Props传入参数扩展

在参数较多的时候可以把Object类型进行传递

<script type="text/babel">
//为什么要传递进来一个对象，解决子组件中传递多个props的时候传递参数不方便

    var obj={
        name:"mgd",
        age:16,
        sex:"男",
        phone:18409441016
    }

    function Fu(props){
        return (
            <div>
                <p>我是父组件</p>   
                <h1>{props.name}</h1>
                <h1>{props.age}</h1>
                <h1>{props.sex}</h1>
                <h1>{props.phone}</h1> 
            </div>
        )
    }

    ReactDOM.render(<Fu {...obj}/>,document.getElementById("demodiv"))
</script>

1.2Props默认值

1.用==||==来进行判断

<script type="text/babel">
    function Zi(props){
        props.text=props.text||"我是子组件的默认值"
        return (
            <h1>我是子组件{props.text}</h1>
        )
    }

    function Fu(){
        var futext="我是父组件的数据5555555"
        return (
            <div>
                <p>我是父组件</p>    
                <Zi text={futext}/>
            </div>
        )
    }

    ReactDOM.render(<Fu/>,document.getElementById("demodiv"))
</script>

2.defaultProps
有些时候, 我们需要设置一些默认属性, 在父级组件未向子级组件传递数据时, 填充默认值。defaultProps

<script type="text/babel">
    function Zi(props){
        return (
            <h1>我是子组件{props.text}++++{props.num}</h1>
        )
    }

    function Fu(){
        var futext="我是父组件的数据5555555"
        return (
            <div>
                <p>我是父组件</p>    
                <Zi text="王大锤"/>
            </div>
        )
    }

    //给需要默认值的组件进行默认props的设置
    Zi.defaultProps={
        text:"么么哒",
        num:"木马"
    }

    ReactDOM.render(<Fu/>,document.getElementById("demodiv"))
</script>

2. Props验证

15.5之前Props验证使用propTypes，它可以保证我们在应用组件的时候可以正确的传递值
注意：自React15.5起,React.PropType已经移入另一个包中，请使用prop-type代替

<script src="js/react.16.8.6.js"></script>   <!-- 注意此处引入的包是15.5之后的 -->
<script src="js/react-dom.16.8.6.js"></script>      <!-- 注意此处引入的包是15.5之后的 -->
<script src="js/babel.min.js"></script>
<script src="js/prop-types.js"></script>
<script type="text/babel">
     function Zi(props){
        return (
            <h1>我是子组件{props.name}</h1>
        )
    }

    // var num=1;//会报错

    function Fu(){
        return (
            <div>
                <p>我是父组件</p>    
                <Zi name="你好，么么哒"/>
               { /* <Zi name={num}/> */}
            </div>
        )
    }
    Zi.propTypes={
        name:PropTypes.string.isRequired
    }
    ReactDOM.render(<Fu/>,document.getElementById("demodiv"))
</script>

3.class类定义方式:传入参数

3.1 传入参数

使用this.props.xx接收值

<script type="text/babel">
    class MyCom extends React.Component{
        render(){
            return (
                <div>
                    <p>我是组件{this.props.name}</p>    
                </div>
            )
        }
    }
    ReactDOM.render(<MyCom name="你好，么么哒"/>,document.getElementById("demodiv"))
</script>

3.2 设置默认属性

类方式创建使用defaultPropos进行默认值设置两种方式

<script type="text/babel">
    class MyCom extends React.Component{
        //方式2
        static defaultProps={
            name:"我是默认值"
        }
        render(){
            return (
                <div>
                    <p>我是组件{this.props.name}</p>    
                </div>
            )
        }
    }

    //方式1
    // 组件名.defaultProps+{
    //     nnn:"nnn"
    // }

    // MyCom.defaultProps={
    //     name:"我是默认值"
    // }

    ReactDOM.render(<MyCom/>,document.getElementById("demodiv"))
</script>

4. 事件处理基础

4.1 事件处理

  1. React事件绑定属性的命名采用驼峰式写法。
  2. 绑定函数的过程中不加() 否则函数会立即执行
<button onClick={this.fun}>点击</button>

<script type="text/babel"> 
    // function fun(){
    //     console.log("么么哒")
    // }
    class MyCom extends React.Component{
        constructor(props){
            super(props)
        }
        fun(){
            console.log("你好，么么哒")
        }
        render(){
            return (
                <div>
                   { /* 不能加圆括号，加圆括号函数自动触发 */}
                    <p onClick={this.fun}>我是父组件</p>    
                </div>
            )
        }
    }

    ReactDOM.render(<MyCom/>,document.getElementById("demodiv"))
</script>

State 状态机

1. 状态机

  1. 在react中开发者只需要关心数据。数据改变页面就会发生改变
  2. 数据等同于状态。状态改变-页面绑定的数据就由react进行改变
  3. 组件被称之为“状态机”，通过更新组件的state来更新对应页面的显示（从新渲染组件 不需要要操作 DOM）

2. 使用

2.1初始化状态

使用状态必须先初始化：this.state={}

class MyCom extends React.Component{
        //1.先创建状态
        constructor(props){
            //默认是没有this的，要从父中八this拿过来
            super(props)
            //使用this.state来进行初始化
            this.state={
                name:"小明"
            }
        }
    }

2.2读取状态

读取状态：this.state.key1

render(){
    return (
        <div>
            <h1>{this.state.name}</h1>    
        </div>
    )
}

2.3更新状态

更新状态—》组件界面更新：this.setState({})

 fun=()=>{
    //注意单词
    this.setState({
        name:"大黄"
    })
}

完整使用

<script type="text/babel">
    // 在这里注意，一定要清楚：
    // 如果一个组件有状态，不能使用函数组件的方式
    class MyCom extends React.Component{
        //1.先创建状态
        constructor(props){
            //默认是没有this的，要从父中八this拿过来
            super(props)
            //使用this.state来进行初始化
            this.state={
                name:"小明"
            }
        }

        //在这里需要注意的是函数的this
        /* //修改this指向1
        fun=()=>{
            //注意单词
            this.setState({
                name:"大黄"
            })
        } */

        fun=()=>{
            //注意单词
            this.setState({
                name:"大黄"
            })
        }

        render(){
            return (
                <div>
                    <h1>{this.state.name}</h1>   
                   { /* 修改this指向2：在调用的时候传入this */}
                    <button onClick={this.fun.bind(this)}>点我修改数据</button>
                </div>
            )
        }
    }
    ReactDOM.render(<MyCom/>,document.getElementById("demodiv"))
</script>

扩展知识

  1. 为什么不用工厂方式创建组件
    在有状态的前提下 不能使用工厂方式创建组件
  2. 修改this指向
    • 通过bind方法进行原地绑定，从而改变this指向
    • 通过创建箭头函数
    • 在constructor中提前对事件进行绑定
    • 将事件调用的写法改为箭头函数的形式

练手demo：

  1. 同步修改输入框输入内容值改变
<script type="text/babel">

//1.创建组件
    class MyCom extends React.Component{

        constructor(props){
            super(props)
            //2.创建状态数据
            this.state={
                inputval:'22222'
            }
        }

        //5.创建函数
        //7.设置event对象
        fun=(e)=>{
            //6.修改state的数据
            this.setState({
                // inputval:?????数据怎么来，详见第七步
                inputval:e.target.value
            })
        }

        render(){
            return (
                <div>
                    {/* 4.绑定事件，当用户输入的时候，触发修改操作 */}
                    {/* 8.把输入框也绑定上state的数据 */}
                    <input type="text" onInput={this.fun} value={this.state.inputval}/> 
                    {/* 展示state的数据 */}
                    <h1>输入框输入的数据是====={this.state.inputval}</h1>
                </div>
            )
        }
    }

    ReactDOM.render(<MyCom/>,document.getElementById("demodiv"))

</script>

在这里插入图片描述

  1. 当点击页面内容–文字进行改变
<script type="text/babel">
    class My extends React.Component{
        constructor(props){
            super(props)
            this.state={
                text:"我是默认的"
            }
        }

        fun(){
            this.setState({
                text:'你好，么么哒'
            })
        }

        render(){
            return(
                <div>
                    <h1 onClick={this.fun.bind(this)}>点我</h1>  
                    <p>我是要变化的值====={this.state.text}</p>
                </div>
            )
        }
    }

    ReactDOM.render(<My/>,document.getElementById("demodiv"))
</script>

在这里插入图片描述

  1. 点击按钮添加页面内容
<script type="text/babel">

    class My extends React.Component{
        constructor(props){
            super(props)

            this.state={
                inputval:"",
                text:''
            }
        }

        fun=(e)=>{
            this.setState({
                inputval:e.target.value
            })
        }

        func(){
            this.setState({
                text:this.state.inputval
            })
        }
        render(){
            return(
                <div>
                    <input type="text" onInput={this.fun}/>
                    <button onClick={this.func.bind(this)}>点我设置</button>
                    <p>输入框的内容是++++++{this.state.text}</p>    
                </div>
            )
        }
    }

    ReactDOM.render(<My/>,document.getElementById("demodiv"))
</script>

在这里插入图片描述

温馨提示：

本篇博客中的案例中挖了很多的坑，填平有进步喔

从人到猿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Spring StateMachine学习(三) —— 传递参数
hxyascx的博客
04-15 1625
在企业开发中，数据在不同的业务间传输是最常见的工作，所以虽然我们的主架构是用的状态机，也就是从流程状态的角度来看待这个项目，但在具体业务中，每个状态的转变中会牵涉到各类业务，这些业务有些需要收到状态机变化的通知，需要把状态值传递给业务类和业务方法，同样的，在处理状态变化是，也需要获取业务数据，方便不同的业务在同一个状态变化环节做各自的业务，下面我们就讲下这个数据在spring statemachi...
状态机，消息循环，框架
jun7118的博客
03-19 1865
任何一个相对独立的对象，都可以被抽象成一个状态机（其实任何事物都是以某种状态存在于世界中的，事物之间交互使得状态发生转移），每个状态机有若干个对所建模型有实际意义的状态，以及状态之间相互转变的触发条件，当触发条件也就是事件发生，状态发生转移，这就像面对对象的类，类里面封装有数据，还有方法接口，数据也就是状态机的状态，接口就是改变状态机状态的方法，大的状态机必然由数个小的状态机组成，所以类中有类和私
Linux编程之有限状态机FSM的理解与实现
weixin_33755557的博客
06-23 1091
有限状态机（finite state machine）简称FSM，表示有限个状态及在这些状态之间的转移和动作等行为的数学模型，在计算机领域有着广泛的应用。FSM是一种逻辑单元内部的一种高效编程方法，在服务器编程中，服务器可以根据不同状态或者消息类型进行相应的处理逻辑，使得程序逻辑清晰易懂。 那有限状态机通常在什么地方被用到？ 处理程序语言或者自然语言的 tokenizer,自底向上解析语法的par...
ROS smach-----状态之间传递用户数据
倔强不倒翁的博客
11-07 1265
ROS smach-----状态之间传递用户数据
状态机--状态机4，关于战斗中负责兵种状态切换的状态机
zlQQhs（莫落）的专栏
04-02 2966
前面花了4篇文章废话了那么多却没有提到传说中的状态机，那么这一篇就来讲讲那个 传说中的状态机到底是个长什么样的东东，前面几篇主要是做铺垫用，下面总结下： 1.状态切换由事件驱动，如调用onIdle()进入待机状态，调用onWalk()进入行走状态 2.状态有进入，也有退出，如调用onFrozen()进入冰冻状态，调用onFrozenEnd()退出冰冻状态 3.状态之间的切换是有限制
react 组件传值 状态机/state
YPX_YGWW的博客
11-30 577
组件 本质 自定义标签 组件的特点优势 强内聚 弱耦合 提高了代码的复用性 降低了测试难度 代码的复杂度也大大降低 组件的分类 在react中有两种组件的写法 函数组件--无状态组件 语法: function 函数名(组件名 但是名字首字母必须必须必须必须 必须 大写){ return ( jsx ) } 类组件--有状态组件 语法： class 类名(当前组件名首字母大写) extends React.Component{ render(){ render
props、外部传值、内部传值、 props的默认值、state状态机、state修改状态、无状态组件、有状态组件
CIA的博客
11-18 802
一、props props 是组件对外的接口。接收外部传入的数据。是组件的属性（等同于html标签的属性）。 注意：Props对于使用它的组件内部来说，是只读的。一旦赋值不能修改。 组件外部传值： <组件名 属性名1=值1 属性名2=值2 .. /> 属性值=“静态值” 属性值={js数据} 组件内部使用： 1）、函数组件：{props.属性名} function MyPerson(props){ return ( <div> <p>{props.n
android activity传值到dialog,自定义Dialog（二）之Dialog与Activity传值
weixin_31860973的博客
05-28 1230
之前发的那篇自定义Dialog似乎有点太含糊，Dialog的关系图甚至都没写，以及Dialog显示的时候Activity的生命周期是处于什么状态，Dialog如何向Activity传递值1，Dialog的关系图 2，Dialog显示的时候Activity处于什么状态 ? Dialog显示的时候不会调用Activity的任何生命周期方法，上代码：public class MainActivity e...
Frament的使用和传值
04-20
这些方法与Activity的生命周期紧密相关，理解它们有助于编写高效且响应式的应用。 3. **Fragment的交互** Activity可以通过`FragmentManager`与Fragment进行通信。例如，通过`findFragmentById()`或`...
子窗口传值到父窗口.rar
10-13
在Web开发中，有时我们需要在子窗口与父窗口之间传递数据。这通常发生在弹出窗口或者框架集等场景中，用户在子窗口进行操作后，需要将结果反馈给父窗口，以便更新父窗口的状态或展示相关信息。这个过程就称为“子...
关于有限状态机（fsm）编码的技巧和注意事项
10-08
关于有限状态机（fsm）编码的技巧和注意事项
状态机模型
嵌入式与人工智能
08-21 267
状态机状态机博客来源 状态机 #include <stdio.h> #include <stdlib.h> #include <string.h> #define STATETRANS(n) (stateTran_##n) typedef enum { sta_origin=0, sta_running, sta_owencpu, sta_sleep_int, sta_sleep_unint }State; typedef enum{ e
赋值语句及综合结果
luoai_2666的博客
07-03 764
本文讨论如何在Verilog中的实现不同的赋值，以及它们在逻辑综合中会推断出什么样的电路。 1、当对同一个net，使用多个assign语句，会综合出什么样的逻辑？ 在可综合的verilog代码中，为同一个net使用多个assign语句是错误的。综合工具会报出语法错误，即“net is being driven by more than one source”。 例如，以下是错误的： 图片 但是，使用多个assign来驱动三态net 是合法的语句，如下示例所示： 图片 ...
状态机的三种方式
love coding
09-18 970
状态机
状态机的VHDL设计
念念不忘，必有回响
09-20 8028
用一个信号发生器为例子，说明了VHDL的FSM的一些基础知识。
RTOS之UCOS（一）--- 有限状态机
流云
05-30 4621
一、什么是有限状态机 有限状态机（FSM: Finite-state machine）是一种用来进行对象行为建模的工具，其作用主要是描述对象在它的生命周期内所经历的状态序列，以及如何响应来自外界的各种事件。它把复杂的控制逻辑分解成有限个稳定状态，在每个状态上判断事件，变连续处理为离散数字处理，符合计算机的工作特点。同时，因为有限状态机具有有限个状态，所以可以在实际的工程上实现。但这并不意味着其只能进行有限次的处理，相反，有限状态机是闭环系统，有限无穷，可以用有限的状态，处理无穷的事务。在计算机科学中，有限
java状态机实现订单状态转移
最新发布
05-09 1347
状态机
C语言状态机
IT8343的博客
04-20 1699
#include <stdio.h> #include<stdlib.h> int main() { int num = 0; int i = 0; int state = -1; srand((unsigned)time(NULL)); while(1) { if(i>50)return 0; sleep(1); switch(s...
状态模式 处理订单状态_将状态机模式实现为流处理器
最佳 Java 编程
06-01 1151
状态模式 处理订单状态 在我的上一个博客中，我说过我真的以为某些“四人行”（GOF）模式已经过时了，如果不是过时的话肯定不受欢迎。 特别是我说过StateMachine没什么用，因为您通常会想到另一种更简单的方式来执行您正在执行的事情，而不是使用它。 为了进行修正，无论是为了宣讲过时的内容还是我在上一个博客末尾附加的丑陋的“ C”代码，我都认为我将演示使用StateMachine将Twitte...
51单片机实现状态机详解
资料中提到了两种类型的状态机——梅里状态机和摩尔状态机，它们在转移条件与输出方式上有所不同。此外，还解释了状态机设计的五个关键要素：状态、输入、输出、状态转移函数和输出函数。状态机可以用硬件电路或软件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值