React | 实例三大核心属性（state、props、refs)

目录

一、state

1、理解

2、强烈注意

二、props

1、基本用法

2、类型、默认值、必要性

三、refs

---

一、state

1、理解

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

• 组件被称为“状态机”，通过更新组件的state来更新对应的页面显示（重新渲染组件）

2、强烈注意

• 组件中render方法中的this为组件实例对象
• 在方法中 ,组件自定义的方法中this为undefined，如何解决？

1. 强制绑定this：通过函数对象的bind()
2. 箭头函数 

• 状态数据，不能直接修改或更新

我们来通过一个切换天气的小案例来理解一下：

原本写法：

在原本的写法中，change方法在实例对象的原型对象上，供实例使用。由于change是作为onClick的回调，所以不是通过实例调用的，是直接调用，因为类中的方法默认开启了局部的严格模式，所以change中的this为undefined。

我们可以在代码中看到，我们通过函数对象的bind（）改变了this的指向。

 简写：

 在我们的简写中，我们之前就知道，箭头函数是没有自己的this指向的，所以当我们自定义方法，需要用赋值语句的形式+箭头函数来完成我们的自定义方法。

其中，还一个需要注意的点，不管是原本的写法，还是我们的简写，当我们给state进行更新时，都必须通过setState这个API来进行设置！！！

二、props

在说props之前，先说一个题外话，那就是我们的constructor构造函数可以省略嘛？

我们可以看到React官网上也有说明，我们的constructor构造函数其实只有在以下两种情况下会用到：

 但是，我们上面的state简写中已经有说到，我们可以直接在组件中用赋值语句的方法初始化内部state，

        // 初始化状态（赋值语句）
        state = {isHot:true}

这就解决了我们需要用到构造函数的第一种情况；而第二种情况，我们也说过，我们可以不用bind()函数来改变this指向这个麻烦的方法，我们可以直接用箭头函数+赋值语句的方法。

        // 自定义方法（赋值语句的形式 + 箭头函数）
        change=()=>{
            const isHot = this.state.isHot
            this.setState({isHot:!isHot})
        }

这样看来，我们的确可以不用constructor构造函数，但是没有构造函数和用到构造函数真的就一点点区别都没有嘛？事实也不是这样，如果需要在为 React.Component 子类实现构造函数时，应在其他语句之前调用 super(props)。否则，this.props 在构造函数中可能会出现未定义的 bug。

好了，我们继续说回到props……

 什么是props？

每个组件对象都会有props属性，组件标签的所有属性都保存在props中。

它的作用是通过标签属性从组件外向组件内传递变化的数据，但是需要注意的点是：组件内部不要修改props数据，因为它是只读的。

1、基本用法

 这是props批量传递参数，我们是这样使用的：

 我们看到 {...P1}一定很眼熟，大家会想到展开运算符，但是需要我们注意的点是，之前学习的扩展运算符真的是这样使用的嘛？

构造字面量对象时展开语法：

这样看，是很正常的 ，但是如果这样呢？

一开始没有报错的原因很简单，因为我们在【...】时外面用了花括号，如果不用花括号，就会报错，大家肯定好奇怪，我们在标签体内也用到花括号了哇，所以不报错也是情理之中呀。但是此花括号非彼花括号，标签体内的花括号代表的是，括号里的是表达式，在JS层面来说，它就是直接【...P1】了，但是为什么没有报错呢？不绕弯子了，是因为在JSX里，有babel.js和react.js的加持，所以可以直接写，但公允许在标签体里用来属性的传递。 

2、类型、默认值、必要性

 其中，propTypes代表的是规则的意思，要注意首字母是小写，而Person.propTypes里的PropTypes的首字母要大写。这种写法的意思是给Person这个实例对象上添加了这些规则，我们也可以直接写在组件里，但是要用static这个关键字。

三、refs

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

在典型的React数据流中，props是父组件与子组件交互的唯一方式。要修改一个子组件，你需要使用新的props来重新渲染它。但是，在某些情况下，你需要在典型数据流之外强制修改子组件。被修改的子组件可能是一个React组件的实例，也可能是一个DOM元素。对于这两种情况，React都提供了解决办法。

何时使用refs？

• 管理焦点，文本选择或媒体播放。
• 触发强制动画。
• 集成第三方DOM库。 

我们来看一下用字符串形式的ref属性：

 首先，我们给我们想要操作的节点做一个节点，例如 "inp1"。你可以通过 this.refs.inp1 来访问 DOM 节点。我们不建议使用它，因为 string 类型的 refs 存在 一些问题。它已过时并可能会在未来的版本被移除。

所以我们接下来看一下回调函数形式的ref属性：

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

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

okk，今天说到这。拜比~