React学习迷你笔记

Setstate

深层的原理并不需要过多纠结，你只需要记住的是：在使用 React.js 的时候，并不需要担心多次进行 setState 会带来性能问题。

通过this.setState()方法来更新state。当this.setState()方法被调用的时候，React会重新调用render方法来重新渲染UI

setState方法通过一个队列机制实现state更新，当执行setState的时候，会将需要更新的state合并之后放入状态队列，而不会立即更新this.state

所以如果想要在后文利用更新的this.state时，向setstate传入参数并不能解决问题，而传入函数可以得到更新后的值，但是这种情况并不是很常见。

Props

• 存在意义：实现组件适应不同场景的需求，使其具有“可配置性”。
• 特点：每个组件接受一个props参数，它是一个对象。

在使用一个组件的时候，可以把参数放在标签的属性当中，这样，所有的属性都会作为 props 对象的键值。
就像使用普通 HTML 标签一样，吧参数放在表示组件的标签上，组件内部可以通过 this.props 访问到配置参数。

一个组件的行为、显示形态都可以用 props 来控制，就可以达到很好的可配置性。

不能改变一个组件被渲染的时候传进来的 props

但是你可以通过父组件主动重新渲染的方式来传入新的 props，从而达到更新的效果。

key!!key!!

只需要记住一个简单的规则：对于用表达式套数组罗列到页面上的元素，都要为每个元素加上 key 属性，这个 key 必须是每个元素唯一的标识。

就像是茫茫人海中如何快速精准找到你想遇到的那个人，答案就是：ta有一个标志，可以在最短的时间内被你找到。（狗头.jpg）

key 的值可以直接后台数据返回的 id，因为后台的 id 都是唯一的。

记住一点：在实际项目当中，如果数据顺序可能发生变化，标准做法是最好是后台数据返回的 id 作为列表元素的 key。

如果使用循环计数器直接作为key 的话，只是起到了掩耳盗铃的效果，不太严谨。
一个好的经验法则是：在 map() 方法中的元素需要设置 key 属性。

另一方面，当子元素拥有 key 时，React 使用 key 来匹配原有树上的子元素以及最新树上的子元素。就很方便

状态提升

当某个状态被多个组件依赖或者影响的时候，就把该状态提升到这些组件的最近公共父组件中去管理，用 props
传递数据或者函数来管理这种依赖或着影响的行为。

受控组件

HTML中，表单元素通常自己维护state，并根据用户输入进行更新；在React中，可变状态（mutable state）通常保存在组件的state属性中，且只能使用setSate（）更新。

受控组件：

1. React的state成为“唯一数据来源”。
2. 渲染表单的React组件控制用户输入过程表单的操作。

这种表单输入元素叫做“受控组件”。
仅记录个人学习的一点收获，后续仍会有更新，若有不当之处，恳请指正。