React--》React组件的三大核心属性

目录

state

事件绑定

props

函数式组件使用props

refs

---

state

state是组件对象最重要的属性，值是对象(可以包含多个 key-value的组合)；组件被称为“状态机”，通过更新组件来对应页面显示(重新渲染组件)，也就是有状态组件：

事件绑定

在React中进行事件绑定来渲染数据通过使用以下方式进行：

虽然能实现效果，但是未免有些过于繁琐，要知道我们在创建类的时候，如果不是通过new出来的实例传入的数据，我们完全可以把固定的数据写在构造器的外面，如下：

所以我们也可以将state状态写在构造器外面，构造器可以直接省略，通过箭头函数的this指向外层的this来达到修改state中this数据的目的：

注意：

1）组件中render方法中的this为组件实例对象。

2）组件自定义的方法中this为undefined，强制绑定this可以通过函数对象的bind()或箭头函数。

3）状态数据，不能直接修改或更新。

props

每个组件对象都会有 props 属性，组件标签的所有属性都保存在 props 中。其基本使用如下：

如果想批量传递props，可以通过以下方式：

构造器是否接受props，是否传递给super，取决于：是否希望在构造器中通过this访问props。

函数式组件使用props

注意：

1）通过标签属性从组件外向组件内传递变化的数据

2）props是只读的，组件内部不要修改props

refs

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

字符串形式的ref

虽然这种方式很简单，但是存在一定的效率问题，官方文档明确说明不建议去使用它：

回调形式的ref

拿到当前ref所在的节点，react帮助我们调用函数然后传进来，之后挂载到实例自身上。

使用回调形式的ref会出现以下问题，如果想解决这个问题，可以用以下方式：

createRef的使用

React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点。但这种形式有一种缺点就是只能容纳一个元素进行使用，如果想出里多个元素需创建多个createRef容器。