组件实例的三大属性state,props,refs

布满荆棘的人生 2022-09-01 08:28 139阅读 0赞

# 组件实例的三大属性 #

## state ##

我们都说React是一个状态机，体现是什么地方呢，就是体现在state上，通过与用户的交互，实现不同的状态，然后去渲染UI,这样就让用户的数据和界面保持一致了。state是组件的私有属性。

在React中，更新组件的state，结果就会重新渲染用户界面(不需要操作DOM),一句话就是说，用户的界面会随着状态的改变而改变。

state是组件对象最重要的属性，值是对象（可以包含多个key-value的组合）

**案例**：

1.需求：页面显示【今天天气很炎热】，鼠标点击文字的时候，页面更改为【今天天气很凉爽】

核心代码如下：

<body>
        
        <div id="test">
            
        </div>
    </body>
    
    <script src="../js/react.development.js" type="text/javascript"></script>
    <script src="../js/react-dom.development.js" type="text/javascript"></script>
    
    <script src="../js/babel.min.js"></script>
    
    <script type="text/babel">
            //1.创建组件
            class St extends React.Component{
                constructor(props){
                    super(props);
                    //先给state赋值
                    this.state = {isHot:true,win:"ss"};
                    //找到原型的dem，根据dem函数创建了一个dem1的函数，并且将实例对象的this赋值过去
                    this.dem1 = this.dem.bind(this);
                }
                //render会调用1+n次【1就是初始化的时候调用的，n就是每一次修改state的时候调用的】
                render(){ //这个This也是实例对象
                    //如果加dem()，就是将函数的回调值放入这个地方
                    //this.dem这里面加入this，并不是调用，只不过是找到了dem这个函数，在调用的时候相当于直接调用，并不是实例对象的调用
                    return <h1 onClick = {this.dem1}>今天天气很{this.state.isHot?"炎热":"凉爽"}</h1>    
                }
                //通过state的实例调用dem的时候，this就是实例对象
                dem(){
                    const state =  this.state.isHot;
                     //状态中的属性不能直接进行更改，需要借助API
                    // this.state.isHot = !isHot; 错误
                    //必须使用setState对其进行修改，并且这是一个合并
                    this.setState({isHot:!state});
                }
            }
            // 2.渲染，如果有多个渲染同一个容器，后面的会将前面的覆盖掉
            ReactDOM.render(<St />,document.getElementById("test"));
    </script>

需要注意的是：

1.  组件的构造函数，必须要传递一个props参数
2.  特别关注this【重点】，类中所有的方法局部都开启了严格模式，如果直接进行调用，this就是undefined
3.  想要改变state,需要使用setState进行修改，如果只是修改state的部分属性，则不会影响其他的属性，这个只是合并并不是覆盖。

this.setState()，该方法接收两种参数：对象或函数。

1.  对象：即想要修改的state
2.  函数：接收两个函数，第一个函数接受两个参数，第一个是当前state，第二个是当前props，该函数返回一个对象，和直接传递对象参数是一样的，就是要修改的state；第二个函数参数是state改变后触发的回调

在此还需要注意的是，setState有异步更新和同步更新两种形式，那么什么时候会同步更新，什么时候会异步更新呢？

**React控制之外的事件中调用setState是同步更新的。比如原生js绑定的事件，setTimeout/setInterval等**。

**大部分开发中用到的都是React封装的事件，比如onChange、onClick、onTouchMove等，这些事件处理程序中的setState都是异步处理的。**

//1.创建组件
    class St extends React.Component{
        //可以直接对其进行赋值
        state = {isHot:10};
        render(){ //这个This也是实例对象
            return <h1 onClick = {this.dem}>点击事件</h1> 
        }
    //箭头函数 [自定义方法--->要用赋值语句的形式+箭头函数]
        dem = () =>{
            //修改isHot
            this.setState({ isHot: this.state.isHot + 1})
            console.log(this.state.isHot);
        }
    }

上面的案例中预期setState使得isHot变成了11，输出也应该是11。然而在控制台打印的却是10，也就是并没有对其进行更新。这是因为异步的进行了处理，在输出的时候还没有对其进行处理。

componentDidMount(){
        document.getElementById("test").addEventListener("click",()=>{
            this.setState({isHot: this.state.isHot + 1});
            console.log(this.state.isHot);
        })
    }

但是通过这个原生JS的，可以发现，控制台打印的就是11，也就是已经对其进行了处理。也就是进行了同步的更新。

**React怎么调用同步或者异步的呢？**

在 React 的 setState 函数实现中，会根据一个变量 isBatchingUpdates 判断是直接更新 this.state 还是放到队列中延时更新，而 isBatchingUpdates 默认是 false，表示 setState 会同步更新 this.state；但是，有一个函数 batchedUpdates，该函数会把 isBatchingUpdates 修改为 true，而当 React 在调用事件处理函数之前就会先调用这个 batchedUpdates将isBatchingUpdates修改为true，这样由 React 控制的事件处理过程 setState 不会同步更新 this.state。

**如果是同步更新，每一个setState对调用一个render，并且如果多次调用setState会以最后调用的为准，前面的将会作废；如果是异步更新，多个setSate会统一调用一次render**

dem = () =>{
        this.setState({
            isHot:  1,
            cont:444
        })
        this.setState({
        	isHot: this.state.isHot + 1
    
        })
        this.setState({
            isHot:  888,
            cont:888
        })
    }

上面的最后会输出：isHot是888，cont是888

dem = () =>{
                    
                    this.setState({
                        isHot: this.state.isHot + 1,
                        
                    })
                    this.setState({
                        isHot: this.state.isHot + 1,
                        
                    })
                    this.setState({
                        isHot: this.state.isHot + 888
                    })
                }

初始isHot为10，最后isHot输出为898，也就是前面两个都没有执行。

\*\*注意！！这是异步更新才有的，如果同步更新，每一次都会调用render，这样每一次更新都会 \*\*

**简化版本：**

1.  state的赋值可以不再构造函数中进行
2.  使用了箭头函数，将this进行了改变

如果想要在调用方法的时候传递参数，有两个方法：

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
    <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

上述两种方式是等价的，分别通过[箭头函数][Link 1]和 [`Function.prototype.bind`][Function.prototype.bind] 来实现。

在这两种情况下，React 的事件对象 `e` 会被作为第二个参数传递。如果通过箭头函数的方式，事件对象必须显式的进行传递，而通过 `bind` 的方式，事件对象以及更多的参数将会被隐式的进行传递。

## Props ##

Props主要用来传递数据，比如组件之间进行传值

基本使用：

<body>
        <div id = "div">
    
        </div>
    
    </body>
    <script type="text/babel">
        class Person extends React.Component{
            render(){
                return (
                    <ul>
                        //接受数据并显示
                        <li>{this.props.name}</li>
                        <li>{this.props.age}</li>
                        <li>{this.props.sex}</li>
                    </ul>
                )
            }
        }
        //传递数据
        ReactDOM.render(<Person name="tom" age = "41" sex="男"/>,document.getElementById("div"));
    </script>

如果传递的数据是一个对象，可以更加简便的使用

… 这个符号恐怕都不陌生，这个是一个展开运算符，主要用来展开数组，如下面这个例子：

arr = [1,2,3];
    arr1 = [4,5,6];
    arr2 = [...arr,...arr1];  //arr2 = [1,2,,3,4,5,6]

但是他还有其他的用法：

1.复制一个对象给另一个对象\{…对象名\}。此时这两个对象并没有什么联系了

const p1 = {name:"张三",age:"18",sex:"女"}
    const p2 = {...p1};
    p1.name = "sss";
    console.log(p2)  //{name:"张三",age:"18",sex:"女"}

2.在复制的时候，合并其中的属性

const p1 = {name:"张三",age:"18",sex:"女"}
     const p2 = {...p1,name : "111",hua:"ss"};
     p1.name = "sss";
     console.log(p2)  //{name: "111", age: "18", sex: "女",hua:"ss"}

**注意！！** **\{…P\}并不能展开一个对象**

**props传递一个对象，是因为babel+react使得\{…p\}可以展开对象，但是只有在标签中才能使用**

**对于props限制**

很多时候都想要传递的参数进行相应的限制，比如：限制传递参数的类型，参数的默认值等等

react对此提供了相应的解决方法：

*  propTypes:类型检查，还可以限制不能为空
 *  defaultProps：默认值

**函数式组件的使用**：

函数在使用props的时候，是作为参数进行使用的(props)；

function Person(props){
              return (
                    <ul>
                        <li>{props.name}</li>
                        <li>{props.age}</li>
                        <li>{props.sex}</li>
                    </ul>
                )
        }

## Refs ##

Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。

Refs主要提供了三种方式：

**1.字符串形式**

在想要获取到一个DOM节点，可以直接在这个节点上添加ref属性。利用该属性进行获取该节点的值。

案例：给需要的节点添加ref属性，此时该实例对象的refs上就会有这个值。就可以利用实例对象的refs获取已经添加节点的值

<input ref="dian" type="text" placeholder="点击弹出" />
    
     inputBlur = () =>{
                alert(this.refs.shiqu.value);
            }

**2.回调形式**

回调形式会在ref属性中添加一个回调函数。将该DOM作为参数传递过去。

如：ref里面就是一个回调函数，self就是该input标签。然后在将该DOM元素赋值给实例对象中的一个属性

<input ref={self =>{ this.dian = self;console.log(self)}}  placeholder="点击弹出" />

[\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ab46TKHX-1627354767955)(https://github.com/xzlaptt/React/raw/main/react/1611495051999.png)\]][img-ab46TKHX-1627354767955_https_github.com_xzlaptt_React_raw_main_react_1611495051999.png]

也可以将函数提取出来，在ref中进行调用

isRef = (self) =>{
                this.dian = self;
                console.log(self)
            }
    
    <input ref={this.isRef} type="text" placeholder="点击弹出" />

**3.API形式**

React其实已经给我们提供了一个相应的API，他会自动的将该DOM元素放入实例对象中

如下：依旧先在DOM元素中添加一个ref元素

{/*<input ref={this.容器名称} type="text" placeholder="点击弹出" />*/}
    <input ref={this.MyRef} type="text" placeholder="点击弹出" />
    <input ref={this.MyRef1} type="text" placeholder="点击弹出" />

通过API，创建React的容器，相当于省略了回调的中间环节。但是这个容器是专门专用的，所以每一个ref都需要创建这个。该API会将DOM元素赋值给实例对象的名称为容器名称的属性的current【这个current是固定的】

{/*容器名称 = React.createRef()*/}
    MyRef = React.createRef();
    MyRef1 = React.createRef();

[![API][]][API 1]

然后就可以使用了

btnOnClick = () =>{
        //创建之后，将自身节点，传入current中
        console.log(this.MyRef.current.value);
    }

**官方提示我们不要过度的使用ref，如果发生时间的元素刚好是需要操作的元素，就可以使用事件去替代。**

# React事件 #

React的事件是通过onXxx属性指定事件处理函数

React使用的都是自定义的时间，而不是原生的事件

React中的事件是通过事件委托方式处理的

事件中必须返回的是函数

通过event.target得到发生事件的Dom元素对象

比如：

先声明一个事件，然后在根据事件创建相应的函数，根据事件的event参数，将DOM元素获取到。

<input onChange={this.saveName} type = "text" name ="username"/>
    
    saveName = (event) =>{
                this.setState({name:event.target.value});
            }

**受控和非受控组件**

先来说说受控组件：

使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。

saveName = (event) =>{
        this.setState({name:event.target.value});
    }
    
    savePwd = (event) => {
        this.setState({pwd:event.target.value});
    }
    
    render() {
        return (
            <form action="http://www.baidu.com" onSubmit={this.login}>
                用户名：<input value={this.state.name} onChange={this.saveName} type = "text" />
                密码<input value={this.state.pwd} onChange={this.savePwd} type = "password"/>
                <button>登录</button>
            </form>
        )
    }

由于在表单元素上设置了 `value` 属性，因此显示的值将始终为 `this.state.value`，这使得 React 的 state 成为唯一数据源。由于 `onchange` 在每次按键时都会执行并更新 React 的 state，因此显示的值将随着用户输入而更新。

对于受控组件来说，输入的值始终由 React 的 state 驱动。

非受控组件：

非受控组件其实就是表单元素的值不会更新state。输入数据都是现用现取的。

如下：下面并没有使用state来控制属性，使用的是事件来控制表单的属性值。

class Login extends React.Component{
    
        login = (event) =>{
            event.preventDefault(); //阻止表单提交
                console.log(this.name.value);
                console.log(this.pwd.value);
            }
            render() {
                return (
                    <form action="http://www.baidu.com" onSubmit={this.login}>
                    用户名：<input ref = {self => this.name =self } type = "text" name ="username"/>
                    密码：<input ref = {self => this.pwd =self } type = "password" name ="password"/>
                    <button>登录</button>
                    </form>
                )
        }
    }

**高级函数**

1.如果函数的参数是函数

2.如果函数返回一个函数

**函数的珂里化**

通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式

如下，我们将上面的案例简化，创建高级函数：

class Login extends React.Component{
     
            state = {name:"",pwd:""};
    		
    		//返回一个函数
            saveType = (type) =>{
                return (event) => {
                    this.setState({[type]:event.target.value});
                }
            }
    
            //因为事件中必须是一个函数，所以返回的也是一个函数，这样就符合规范了
            render() {
                return (
                    <form>
          				<input onChange = {this.saveType('name')} type = "text"/>
                        <button>登录</button>
                    </form>
                )
            }
        }
    
        ReactDOM.render(<Login />,document.getElementById("div"));

[Link 1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
[Function.prototype.bind]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind
[img-ab46TKHX-1627354767955_https_github.com_xzlaptt_React_raw_main_react_1611495051999.png]: https://github.com/xzlaptt/React/blob/main/react/1611495051999.png
[API]: /images/20220829/94a8f71472d2412992ec48f33e1be3a5.png
[API 1]: https://github.com/xzlaptt/React/blob/main/react/1611495597978.png