传值与状态机

心已赠人 2021-07-24 12:52 375阅读 0赞

# props #

## 1. Props传入参数 ##

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

### 1.1Props传入参数扩展 ###

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

### 1.2Props默认值 ###

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

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

## 2. Props验证 ##

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

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

### 3.1 传入参数 ###

**使用this.props.xx接收值**

### 3.2 设置默认属性 ###

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

## 4. 事件处理基础 ##

### 4.1 事件处理 ###

1.  React事件绑定属性的命名采用驼峰式写法。
2.  绑定函数的过程中不加() 否则函数会立即执行

# 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:"大黄"
        })
    }

完整使用

# 扩展知识 #

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

练手demo：

1.  同步修改输入框输入内容值改变

![在这里插入图片描述][20190910212633220.png]

1.  当点击页面内容–文字进行改变

![在这里插入图片描述][20190910212710403.png]

1.  点击按钮添加页面内容

![在这里插入图片描述][20190910212731882.png]

# 温馨提示： #

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

[20190910212633220.png]: /images/20210724/10a6a46a436b4e18a29ab42a51e2d8b1.png
[20190910212710403.png]: /images/20210724/4b066442b4fe45eb889e19cfd225cbb5.png
[20190910212731882.png]: /images/20210724/d520209f5792411990f6a0d6c211d419.png