react复习二之组件三大核心属性

State

状态即state驱动着页面的更新，我们需要把数据放在react的state中，再由react驱动页面，state是react自动实例化类组件的时候传进去的属性
改变状态
复习一下绑定事件的几种方式
监听器

直接绑定事件

行内


在类中定义的方法，它在局部也就是方法体内会默认帮你开启严格模式，在jsx写的组件里面绑定事件，由于方法是作为绑定事件的回调函数所以不是通过实例调用的，是直接调用，this指向为undefined，要改变此时的this指向使其指向实例自身

在react中不能直接修改state中的数据，直接更改的话react不认可，修改需要借助内置api也就是setState，这个方法在React.Component的原型对象上

构造器只触发一次，render则是state状态发生变化就执行一次

对组件进行简化
类中可以直接写赋值语句，例如a=1，等同于往每个类实例身上追加一个名为a值为1的成员
方法用箭头函数的原理是箭头函数的this指向会往外侧寻找，这里的外侧this指向就是Weather的实例对象

注意点

1. 组件中render方法中的this为组件的实例对象
2. 组件自定义的方法中this为undefined，解决方法 ①bind强制绑定this指向②箭头函数(赋值语句)
3. 状态数据，不能直接修改或更新

Props

当你向组件中传值时

react会收集并帮你将传进来的值存储在组件实例的props属性中，props是只读的，传值时需要age={18}的形式它才会识别成数字类型的18

通过this.props即可调用

下面这种写法是上面这种的语法糖（语法糖可以理解为简写形式）
复习
三点运算符的作用

三点运算符无法直接展开一个对象，但是外侧包裹一个{}可以复制一个对象，上面语法糖用法是因为babel和react的支持才允许通过拓展运算符展开一个对象并且只适用于标签属性的传递

这样的用法是修改或添加其中某个同名属性的属性值

如果需要对props传过来的数值进行限制，需要给组件实例添加一个属性propTypes

或者

static表示添加在类自身身上而不是类的实例上

注意react16以后类型限制的proptypes是单独的一个包而不是像16以前一样挂载在React上，如果在constructor和super中不接收props会造成props undefined，构造器是否接收props，是否传递给super，取决于是否希望在构造器中通过this访问props

Ref

组件内标签可以定义ref属性来标识自己，有些类似于原生js中的id
字符串形式ref，react不推荐使用，效率低


获取值则是this.refs.input1.value

回调函数形式ref
定义的回调函数react执行render方法时会自动帮你调用，自动把当前所在节点作为参数传进去，你再把他绑定在实例上，就可以调用了，但是如果内联样式写的话，组件更新的时候会执行两次，第一次为null，第二次才是节点

createRef
用react自带的函数，调用后返回一个容器，这个容器可以存储被ref标识的节点，等于创建一个容器挂载在实例自身,react渲染到input时react会把那个节点直接装到那个容器中，一个容器只能放一个节点，后放的会顶掉前面放的

myRef = React.createRef()
<Input ref={this.myRef} type="text" />

容器的样子

所以拿到input就是this.myRef.current.input