react笔记_07组件实例化对象的三大属性

前提
状态(state)
- 作用
- 语法
- 状态使用
- - 总结
属性(props)
- 展开运算符复习
- props-作为属性传入数据
- props-使用展开运算符展开对象
- props-进行数据类型限制
- - propTypes
  - - 语法
    - 校验规则
    - 举例说明
  - defaultProps
  - - 语法
    - 举例说明
refs
- 字符串形式的ref
- - 语法
  - 举例说明
  - 注意点
- 回调形式的ref
- - 什么叫做回调？
  - 语法
  - 举例说明
  - bug
  - 总结
- createRef形式的ref
- - 语法
  - 举例说明

前提

函数式组件适用于简单组件，类式组件适用于复杂组件；
什么是简单组件？什么是复杂组件？
若是组件是有状态的则被称为复杂组件
若是组件没有状态的被称为简单组件；
为什么这么说呢？
因为react的三大属性是组件实例对象的三大属性，
函数式组件是没有实例的，因此基本不使用这三大属性（后面在hooks中使用）；
类式组件存在实例，这三大属性主要是基于class组件来说的

状态(state)

作用

用于存储数据，状态(数据)驱动试图

语法

初始化数据

  this.state={属性名：属性值} // state必须为一个对象

更新值 -> 通过setState更新值
通过setState更新数据有两种方式
- 第一种直接传入修改后的值
  举例说明：将count的值修改为111
```
this.setState({count:111})
```
- 第二种方式是传入一个回调函数，函数的返回值即是要修改的值
  举例说明：将count的值修改为111
```
this.setState({count:111})
```
  渲染过程
  - 当调用setState函数时，react会自动调用该函数，并将state与props传入，因此在该函数中是可以获取当前实例对象的state 与props的
- 使用时机
  - 若是新状态不依赖于原状态 -> 推荐使用对象式的state
  - 若是新状态依赖于原状态 -> 推荐使用函数式的state
  - 举例说明：将count的值变为111
```
this.setState({count:111})
```
```
this.setState(()=>({count:111}))
```
    使用函数式感觉比较繁琐
  - 举例说明：将count值加1
```
const { count } = this.state
this.setState({count:count+1})
```
```
this.setState(state=>({count:state.count+1}))
```
    使用函数式不需要再获取state数据了，因为react在调用函数时帮我们传递过来了
  - 对象式的setState是函数式的setState的语法糖
注意：通过setState更新数据是异步的
```
import React, { Component } from 'react'export default class StateDemo extends Component {state = {count:  1}editCount = ()=>{this.setState(state=>({count:state.count+1}))console.log('count', this.state.count)}render() {return (<div>{this.state.count}<button onClick={this.editCount}>点我count的值变为111</button></div>)}
}
```
当我第一次点击按钮时，页面显示2 但是控制台打印的却是1
- 原因：通过setState更新数据是异步的，而打印数据是同步的(先执行)
- 若是我们想要在通过setState修改数据后，立即拿到修改后的数据，可以使用setState的第二个参数
```
this.setState(stateChange,[callback])
```
  第二个参数是一个回调函数，该回调函数的执行时机是在在此次数据更新的render函数调用之后执行 : setState->render -> callback
```
editCount = ()=>{this.setState(state=>({count:state.count+1}),()=>{console.log('count', this.state.count) // 2})
}
```
  此时第一次点击，控制台打印的就是2了

状态使用

案例：默认显示文本今天天气炎热，当点击文本时显示今天天气凉爽
实现

<div id="test"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">class Mycomponent extends React.Component{// 初始化state数据（若是显示定义了构造器则建议在构造器中初始化状态）state = {isHot:false}render(){const {isHot} = this.statereturn <h1 onClick={this.test}>今天天气{isHot ? '炎热' : '凉爽'}</h1>}test=()=>{console.log(this) // 发现在实例化对象的原型对象的原型对象上会发现有一个setState方法(是React.Component上定义的方法)// 获取状态中的数据const {isHot} = this.state//  通过内置API setState去修改state中的数据this.setState({isHot:!isHot})}}ReactDOM.render(<Mycomponent />, document.getElementById('test'))</script>

总结

为什么状态的名字叫做state?
- 因此React中存在内置setState方法去修改state中的数据，并且使用此方法修改setState中的数据之后会驱动试图进行更新；
使用setState去修改数据是替换还是合并？
- 使用内置API setState去修改state中的数据，这个数据的修改不是替换而是合并
- 举例说明
  - 在初始化时数据state = {isHot:false, xxx:111} 有两条数据
  - 当通过this.setState({isHot:true})去修改数据
  - 再次获取数据时 {isHot:true, xxx:111} xxx不会被覆盖
更改数据的渲染机制是怎样的？
- 在渲染过程中-初始化
  - 【1】发现该标签Mycomponent为大写标签->去寻找组件
  - 【2】发现组件是类式组件-> 通过 new关键字调用构造函数生成实例化对象
  - 通过new关键字调用构造函数时会自动调用constructor方法—生成一个实例化对象就调用一次（new一次调用一次）
  - 【3】通过实例化对象调用render函数得到虚拟dom并渲染为真实dom
- 在渲染过程中-更新
  - 每一次通过 setState 更新数据时，都会再次调用render函数—执行n+1次；
  - 若是直接通过点语法去修改state中的数据，虽然数据改变但是不会重新渲染页面（不会调用render方法）

属性(props)

展开运算符复习

<script>let arr1 = [1, 3, 5, 7, 9]let arr2 = [2, 4, 6, 8, 10]// 【1】展开一个数组console.log(...arr1); // 【2】合并数组let arr3 = [...arr1, ...arr2]// 【3】在函数接收参数使用中使用function sum(...numbers) {return numbers.reduce((preValue, currentValue) => {return preValue + currentValue})}console.log(sum(1, 2, 3, 4));// 【4】构造字面量对象时使用展开语法let person = {name: 'tom', age: 18}let person2 = {...person}// 【5】合并修改let person3 = {...person, name: 'jack', address: "地球"}console.log(person3)// {address: "地球", age: 18, name: "jack"}// 注意：展开运算符不能展开对象//console.log(...person); //报错，
</script>

总结：
展开运算符可以用来展开数组、合并数组、构造字面量对象时使用展开语法、合并修改，但是却不可以展开对象！
在很多时候需要将数据传入组件中，应该怎么传递呢？

props-作为属性传入数据

类式组件

通过标签以 属性 的形式将数据传入，会统一在该实例化对象的props属性中进行接收。

 <div id="test"></div><script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script><script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><!-- 类式组件 --><!-- [1]以属性的形式传递数据 实例：传入姓名、性别、年龄并在页面上进行显示--><script type="text/babel">class Mycomponent extends React.Component{render(){console.log(this.props)const {name, age ,sex} = this.propsreturn (<ul><li>姓名：{name}</li><li>年龄：{age}</li><li>性别：{sex}</li></ul>)}}ReactDOM.render(<Mycomponent name='chaochao' sex='女' age='12' />, document.getElementById('test'))</script>

函数式组件

通过标签以 属性 的形式将数据传入，会统一在方法以形参的形式进行接收(参数为一个对象–全部参数以键值对的形式存储)

<div id="test"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script type="text/babel">function Mycomponent (props){const {name, age , sex} = propsreturn (<ul><li>姓名：{name}</li><li>年龄：{age}</li><li>性别：{sex}</li></ul>)}// 函数中没有静态属性，因此将限制写在函数外面Mycomponent.protoTypes={name: PropTypes.string.isRequired,sex: PropTypes.string,age: PropTypes.array}Mycomponent.defaultProps={sex:'待定',age:0}const obj ={name:'chaochao',// sex:'女',age:18}ReactDOM.render(<Mycomponent {...obj} />, document.getElementById('test'))
</script>

注意：props中的数据是 只读 属性，只允许使用不允许修改

props-使用展开运算符展开对象

在很多情况下，我们传递的数据可能是一个对象或者是属性很多，一一传递显然不是很现实，在这里可以使用展开运算符进行数据传递

<div id="test"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- [2]使用展开运算符进行数据传递 实例：传入姓名、性别、年龄并在页面上进行显示-->
<script type="text/babel">class Mycomponent extends React.Component{render(){console.log(this.props)const {name, age ,sex} = this.propsreturn (<ul><li>姓名：{name}</li><li>年龄：{age}</li><li>性别：{sex}</li></ul>)}}const obj ={name:'chaochao',sex:'女',age:18}ReactDOM.render(<Mycomponent {...obj} />, document.getElementById('test')) // {}表示要在jsx中混入js语法了并不是对象
</script>

通过上述代码发现页面数据依旧能正常显示，但是展开运算符不是不能够展开对象吗？
—>是因为引入的React核心语法以及babel的作用下可以在标签间使用展开运算符展开对象（仅能在标签间使用）

props-进行数据类型限制

propTypes

构造函数存在propTypes属性，作用是进行数据类型校验；

语法

propTypes = {属性名: 校验规则
}

校验规则

校验规则使用的是PropTypes对象 -> PropTypes 提供一系列验证器，可用于确保组件接收到的数据类型是有效的，出于性能方面的考虑，propTypes 仅在开发模式下进行检查。

因此在15.5版本之后再使用PropTypes就需要先安装 prop-types 包；
这里是一个示例记录提供的不同的验证器:

import PropTypes from 'prop-types';MyComponent.propTypes = {// 你可以声明一个 prop 是一个特定的 JS 原始类型。 optionalArray: PropTypes.array, // 数组optionalBool: PropTypes.bool, // boolean值optionalFunc: PropTypes.func, // 函数optionalNumber: PropTypes.number, // 数字optionalObject: PropTypes.object, // 对象optionalString: PropTypes.string, // 字符串optionalSymbol: PropTypes.symbol, // symboloptionalElement: PropTypes.element,// React 元素。// 你也可以声明一个 prop 是类的一个实例。 optionalMessage: PropTypes.instanceOf(Message),// 你可以声明 prop 是特定的值，类似于枚举optionalEnum: PropTypes.oneOf(['News', 'Photos']),// 一个对象可以是多种类型其中之一optionalUnion: PropTypes.oneOfType([PropTypes.string,PropTypes.number,PropTypes.instanceOf(Message)]),// 你可以使用 `isRequired' 链接上述任何一个，以确保在没有提供 prop 的情况下显示警告。// 函数类型的值且必填requiredFunc: PropTypes.func.isRequired,// 任何数据类型的值但必填requiredAny: PropTypes.any.isRequired,// 你也可以声明自定义的验证器。如果验证失败返回 Error 对象。不要使用 `console.warn` 或者 throw ，// 因为这不会在 `oneOfType` 类型的验证器中起作用。customProp: function(props, propName, componentName) {if (!/matchme/.test(props[propName])) {return new Error('Invalid prop `' + propName + '` supplied to' +' `' + componentName + '`. Validation failed.');}},// 也可以声明`arrayOf`和`objectOf`类型的验证器，如果验证失败需要返回Error对象。// 会在数组或者对象的每一个元素上调用验证器。验证器的前两个参数分别是数组或者对象本身，// 以及当前元素的键值。customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {if (!/matchme/.test(propValue[key])) {return new Error('Invalid prop `' + propFullName + '` supplied to' +' `' + componentName + '`. Validation failed.');}})
};

举例说明

    <div id="test"></div><script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><!-- 【3】对传入的数据进行类型限制（数据类型、是否必传、设置默认值） 实例：传入姓名、性别、年龄并在页面上进行显示--><script type="text/babel">class Mycomponent extends React.Component{static propTypes={name: PropTypes.string.isRequired,sex: PropTypes.string,age: PropTypes.number}render(){const {name, age ,sex} = this.propsreturn (<ul><li>姓名：{name}</li><li>年龄：{age}</li><li>性别：{sex}</li></ul>)}}const obj ={name:'chaochao',sex:'女',age:'18'}ReactDOM.render(<Mycomponent {...obj} />, document.getElementById('test')) </script>

报错

defaultProps

构造函数存在defaultProps属性，作用是设置数据的默认值

语法

defaultProps={属性名:'默认值'
}

举例说明

<div id="test"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- 【3】对传入的数据进行类型限制（数据类型、是否必传、设置默认值） 实例：传入姓名、性别、年龄并在页面上进行显示-->
<script type="text/babel">class Mycomponent extends React.Component{static defaultProps={sex:'待定',age:0}render(){const {name, age ,sex} = this.propsreturn (<ul><li>姓名：{name}</li><li>年龄：{age}</li><li>性别：{sex}</li></ul>)}}const obj ={name:'chaochao',age:18}ReactDOM.render(<Mycomponent {...obj} />, document.getElementById('test'))
</script>

性别显示待定

refs

在react中尽量不要直接操作dom,如果要操作dom,可以使用refs;
定义ref的形式有3种

字符串形式的ref

语法

每个实例化对象上都存在一个refs属性，该属性为一个对象;
在想要获取的vdom上添加ref属性，属性值为一个字符串；
添加之后就会将该dom元素以键值对的形式(ref属性名：dom元素)添加在refs对象中;

举例说明

<div id="test"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">class Mycomponent extends React.Component{state = {isHot:false}render(){const {isHot} = this.statereturn (<div><input ref='input1' type="text" /><button onClick={this.getValue}>点我显示数据</button></div>)}getValue = ()=>{console.log('refs', this.refs) // refs {input1: input}const {input1} = this.refsconsole.log(input1.value) // 输入111点击按钮->111}}ReactDOM.render(<Mycomponent />, document.getElementById('test'))
</script>

注意点

该形式在官方不推荐使用，因为使用此方式定义ref若是多次定义—效率有很大的问题

回调形式的ref

什么叫做回调？

1.定义了函数；
2.函数自己没调用；
3.函数最终被执行了

语法

在想要获取的vdom上添加ref属性, 属性值为一个函数

在render函数执行过程中，发现ref的属性值为一个函数，react就会调用该函数并将该dom作为参数传入到函数中，我们就可以拿到该dom了。

 ref={dom => value=dom}

将dom元素赋值给了实例化对象的value属性

举例说明

<div id="test"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">class Mycomponent extends React.Component{state = {isHot:false}render(){const {isHot} = this.statereturn (<div><input ref={c => this.input=c} type="text" /><button onClick={this.getValue}>点我显示数据</button></div>)}getValue = ()=>{const {input} = thisconsole.log(input.value) // 输入111点击按钮-> 111}}ReactDOM.render(<Mycomponent />, document.getElementById('test'))
</script>

bug

问题

当将函数写在行内时

渲染-> 执行render函数时-> 发现ref绑定的是一个函数，会自动调用该函数并将该dom元素作为参数传入；
更新 ->重新调用render函数，此次执行过程中会调用2次该函数—第一次传入的参数为null，第二次传入的才是dom
- 没有造成实质的影响，因为这两次调用过程很短暂；

解决
不直接将函数写在行内，将函数写在实例对象上之后引入就不会有这样的问题；

渲染-> 执行render函数时-> 发现ref绑定的是一个函数，会自动调用该函数并将该dom元素作为参数传入；
更新 -> 不调用此函数；

验证

<div id="test"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">class Mycomponent extends React.Component{state = {isHot:false}render(){return (<div><input ref={c => {console.log('c',c); this.input=c}} type="text" /><button onClick={this.getValue}>点我显示数据</button><button onClick={this.editValue}>点我更改state</button></div>)}getValue = ()=>{const {input} = thisconsole.log(input.value) // 输入111点击按钮-> 111}editValue = ()=>{const {isHot} = this.statethis.setState({isHot: !isHot})}}ReactDOM.render(<Mycomponent />, document.getElementById('test'))
</script>

一进入页面，控制台打印
当点击“点我更改state”，控制台打印

<div id="test"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">class Mycomponent extends React.Component{state = {isHot:false}render(){return (<div><input ref={this.reffun} type="text" /><button onClick={this.getValue}>点我显示数据</button><button onClick={this.editValue}>点我更改state</button></div>)}reffun = (dom)=>{console.log('c',dom); this.input=dom}getValue = ()=>{const {input} = thisconsole.log(input.value) // 输入111点击按钮-> 111}editValue = ()=>{const {isHot} = this.statethis.setState({isHot: !isHot})}}ReactDOM.render(<Mycomponent />, document.getElementById('test'))
</script>

一进入页面，控制台打印
当点击“点我更改state”，控制台无显示

总结

将函数写在行内—初始渲染该函数执行1次，每次更新执行两次；
不将函数写在行内—只会在初始化时执行1次；

createRef形式的ref

语法

React对象上存在一个createRef方法，该方法调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的->也就是说使用该方法产生的容器只能装一个dom;

this.input = React.createRef() // 产生一个容器
<input ref={ this.input }> //  存储const {current} = this.input // 容器的current属性表示当前的dom元素

举例说明

<div id="test"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">class Mycomponent extends React.Component{state = {isHot:false}input1 = React.createRef()render(){const {isHot} = this.statereturn (<div><input ref={this.input1} type="text" /><button onClick={this.getValue}>点我显示数据</button></div>)}getValue = ()=>{const {current} = this.input1console.log(current.value) //输入111点击按钮->111}}ReactDOM.render(<Mycomponent />, document.getElementById('test'))
</script>