【React】3.0 组件实例的三大核心属性——state、props、 refs与事件处理

• 函数式组件适用于‘简单组件’的定义；
• 类式组件适用于‘复杂组件’的定义。
• 有状态（state）的就是复杂组件，
• 反之则是简单组件。
• 实例：类似于java中的实例对象。
  （最新版本的react新增一个hooks属性，可以让函数式组件拥有三大属性）

1.0 state

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

image.png

这里的props下一节解释，可以去官网看首页就有演示。

image.png

2.0 react绑定事件

首先看原生的js绑定事件：

    
        
        
    
    
        按钮1
        按钮2
        按钮3

        
    

react的事件绑定：

image.png

3.0 类中方法中的this

点击“凉爽”，自动变为“炎热”

image.png

image.png

严重注意：状态必须通过setState进行更新,且更新是一种合并，不是替换。

4.0 state的简写方式

5.0 props

解决从组件外部将参数/属性/函数， 带入组件中去。

或者如下：

如上编写已经很接近实际开发，但还是存在如下问题：

1. 新的信息得不断重复插入真实DOM的语句。
2. 一般的数据填充是ajax从服务器请求，而不是在前端代码明确。

6.0 props批量传递

image.png

...p三点运算符。
回顾一下js中的三点运算符。

image.png

展开数据并分别打印或者连接数组。

在函数中使用，函数传参：

image.png

这一点和java中的三点运算符意义一致。

以下代码无法运行：

            //构造字面量对象时使用展开语法
            let person = {name:'tom',age:18}
            console.log(...person); //报错，展开运算符不能展开对象

但如下写法可以：

image.png

如上语法知识课参考如下网站：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference

image.png

image.png

image.png

image.png

回到react，{...p}中的花括号只是作为一个分隔符在使用，和如上js中的花括号不是一个意思。相当于只写...p。
之所以在react能用这个语法展开原生不能展开的对象，在于recat支持了这种展开方式。
但不能随意使用，只能用于标签属性的传递。

6.0 props限制

需求：显示的年龄要比传入的年龄大一岁。

image.png

此代码存在一个问题：
当自己写的时候 知道传参是一个int类型的年龄，但如果是其他人接手，可能就会出现传参错误，变成字符串拼接。

综合来看，我们有必要有以下限制需求：

1. 限制某些属性是不可或缺的，必须传参
2. 对传递的标签属性进行类型限制
   3.给某些属性提供默认值

引入prop-types.js包。在recat中引入包相当于一个js引入了一个关键对象。

image.png

同时，props是只读的。

7.0 props的简写

构造函数的知识点参考官网文档：
https://zh-hans.reactjs.org/docs/react-component.html#constructor

image.png

构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问props（此知识点实际开发中基本用不到，实际开发中基本不写构造器）

8.0 函数式组件使用props

本篇文章名称叫组件实例的三大核心属性，是因为组件当是实例时才有三大属性（相当于才有指向实例本身的this），但是，即使是简单组件也是有props属性的，相当于函数是可以通过传参的形式传递props。

总结：

1. 每个组件对象都会有props(properties的简写)属性
2. 组件标签的所有属性都保存在props中
3. 通过标签属性从组件外向组件内传递变化的数据
4. 注意: 组件内部不要修改props数据
5. 对props中的属性值进行类型限制和必要性限制，React v15.5 开始已弃用类名.propTypes = {},转为使用prop-types库进限制（需要引入prop-types库）
   React v15.5以前：

Person.propTypes = {
 name: React.PropTypes.string.isRequired,
 age: React.PropTypes.number
}

新的方式：

Person.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number. 
}

9.0 refs与事件处理

refs和事件处理放一起学习。
首先编辑一个demo：

image.png

进一步完善如下：

可以理解为ref取代原生中id在开发过程中的作用。

10.0 回调形式的ref

字符串形式的ref（最老的形式）已经不被react官方推荐，而且在其文档中表示之后的新版本更新很可能把这种形式废弃掉。
进入官网-文档-高级指引-Refs&DOM：
https://react.docschina.org/docs/getting-started.html

image.png

如下图所示，这是最新的写法：

image.png

再往下滚动：

image.png

点击“一些问题”：

image.png

说白了，就是写多了效率就不高了，所以react官方并不推荐字符串形式的ref。

12.0 调形式的ref中回调执行次数的问题

image.png

运行，点击“点我切换天气”：

image.png

虽然这样无关紧要，但可以优化成如下代码：

13.0 createRef(推荐使用)

React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的。

14.0 recat的事件处理

END`