React 笔记
善于提取组件,把组件拆分成更小的组件
props
只读。
不要直接修改 state
,应该调用 this.setState()
否则不会重新渲染组件。
构造函数是唯一可以给 this.state
赋值的地方
state
的更新可能是异步的
出于性能考虑,React 可能会把多个 setState()
调用合并成一个调用。
因为 this.props
和 this.state
可能会异步更新,所以你不要依赖他们的值来更新下一个状态。
让 setState()
接收一个函数而不是一个对象。这个函数用上一个 state
作为第一个参数,将此次更新被应用时的 props
做为第二个参数
state
的更新会被合并
React 事件的命名采用小驼峰式(camelCase),而不是纯小写。
使用 JSX 语法时你需要传入一个函数作为事件处理函数,而不是一个字符串。
在 React 中另一个不同点是你不能通过返回 false
的方式阻止默认行为。你必须显式的使用 preventDefault
。
class
的方法默认不会绑定 this
。如果你忘记绑定 this.handleClick
并把它传入了 onClick
,当你调用这个函数的时候 this
的值为 undefined
。
推荐使用 class field
语法或者 bind
语法
用箭头函数 onClick={() => {}}
会导致性能问题
在 JavaScript 中,true && expression
总是会返回 expression
, 而 false && expression
总是会返回 false
。
返回 false
的表达式会使 &&
后面的元素被跳过,但会返回 false
表达式。
让 render
方法直接返回 null
,而不进行任何渲染。
key
帮助 React 识别哪些元素改变了,比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。
一个元素的 key
最好是这个元素在列表中拥有的一个独一无二的字符串。通常,我们使用数据中的 id
来作为元素的 key
当元素没有确定 id
的时候,万不得已你可以使用元素索引 index
作为 key
如果列表项目的顺序可能会变化,我们不建议使用索引来用作 key
值,因为这样做会导致性能变差,还可能引起组件状态的问题。