react中组件实例的三大核心属性（state、props、refs）

1、state

1.1、 理解：

1. state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合
2. 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

1.2、案例

** 需求:**定义一个展示天气信息的组件

1. 默认展示天气炎热 或 凉爽
2. 点击文字切换天气

  代码示例：

  运行结果：

上述代码的简写：

1.3、注意：

1. 组件中render方法中的this为组件实例对象
2. 组件自定义的方法中this为undefined，如何解决？
   a) 在构造函数中强制绑定this: 通过函数对象的bind() constructor(props) { super(props); this.demo = this.changeWeather.bind(this); }
   b) 使用箭头函数（赋值语句+箭头函数的形式） changeWeather = () => { }
   c)在render中绑定this return

   xxxxx

   
   d)在render中使用箭头函数 return

   this.changeWeather()}>xxxxx

3. 状态数据，不能直接修改或更新必须通过setState修改，且更新是一种合并，不是替换。setState是异步的

2、props

2.1、理解：

1. 每个组件对象都会有props(properties的简写)属性
2. 组件标签的所有属性都保存在props中

2.2、作用：

1. 通过标签属性从组件外向组件内传递变化的数据
2. 注意: 组件内部不要修改props数据

2,3、案例：

需求: 自定义用来显示一个人员信息的组件

1. 姓名必须指定，且为字符串类型；
2. 性别为字符串类型，如果性别没有指定，默认为男
3. 年龄为字符串类型，且为数字类型，默认值为18

方法1：通过类式组件实现

方法2：通过函数式组件实现

运行结果：

注意：

1. props只允许读，不允许改

3、ref

3.1、理解

  组件内的标签可以定义ref属性来标识自己

3.2、案例

需求: 自定义组件, 功能说明如下:

1. 点击按钮, 提示第一个输入框中的值
2. 当第2个输入框失去焦点时, 提示这个输入框中的值

  实现请查看 ref使用方式

3.3、使用方式

3.3.1、字符串形式的ref

注意：不推荐使用，它已过时并可能会在未来的版本被移除

 //创建组件
    class Demo extends React.Component {

        showDate = () => {
            const {input1} = this.refs
            alert(input1.value)
        }
        showDate2 = () => {
            const {input2} = this.refs
            alert(input2.value)
        }

        render() {
            return (
                

                     
                    点击我提示左侧的数据
                     
                    
                
            )
        }
    }

    ReactDOM.render(, document.getElementById('test'))

3.3.2、回调形式的ref

//创建组件
    class Demo extends React.Component {

        showDate = () => {
            const {input1} = this
            alert(input1.value)
        }
        showDate2 = () => {
            const {input2} = this
            alert(input2.value)
        }

        render() {
            return (
                

                    {/*this指向创建的这个实例对象*/}
                    {this.input1=currentNode}} type="text" placeholder="点击按钮提示数据"/> 
                    点击我提示左侧的数据
                     
                    {this.input2=currentNode}} onBlur={this.showDate2} type="text" placeholder="失去焦点提示数据"/>
                
            )
        }
    }

    ReactDOM.render(, document.getElementById('test'));

关于回调refs调用几次的问题：

  如果 ref 回调函数是以内联函数的方式定义的，在更新过程中它会被执行两次，第一次传入参数 null，然后第二次会传入参数 DOM 元素。这是因为在每次渲染时会创建一个新的函数实例，所以 React 清空旧的 ref 并且设置新的。

案例

  通过将 ref 的回调函数定义成 class 的绑定函数的方式可以避免上述问题，但是大多数情况下它是无关紧要的。

saveInput = (currentNode) => {
            this.input1 = currentNode;
            console.log('@@', currentNode)
        }

        render() {
            return (
                

                     
                
            )
        }

3.3.3、createRef创建ref容器

  React.createRef()调用后可以返回一个容易，该容器可以存储被ref所标识的节点。此方式是最新的，官方所推荐的

//创建组件
    class Demo extends React.Component {
        myRef=React.createRef();
        myRef2=React.createRef();

        showDate = () => {
            alert(this.myRef.current.value)
        }
        showDate2 = () => {
            alert(this.myRef2.current.value)
        }

        render() {
            return (
                

                     
                    点击我提示左侧的数据
                     
                    
                
            )
        }
    }
    ReactDOM.render(, document.getElementById('test'))