官网学习笔记

*,p,pre,span,div,code { font-size: 16px }

一、Introducint JSX

在JSX中插入用户输入是安全的，默认情况下ReactDOM会在渲染前，转义JSX中的任意值，渲染前，所有的值都被转化为字符串形式，这能预防XSS攻击。

二、Components and Props

All React components must act like pure functions with respect to their props.

组件中的props都是只读的，不能修改

三、State and Lifecycle

state和props相似，但是它是私有的，完全由组件自身控制。state特性只在class中出现。

If you don‘t use something in render(), it shouldn‘t be in the state.

指定this.state值的唯一地方是constructor中。

state 更新可能是异步的

为了更好的性能，React可能会调用一个更新，批处理多个setState()。因为this.props和this.state可能异步更新，因此不能依靠他们的值来计算下一个状态值。比如下面这个例子，可能会使得counter更新失败：

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

解决这个问题可以使用第二种方法使用setState()，给setState()传入一个函数而不是一个对象。传入的函数的第一个参数是当前的state，第二个参数是更新前的props。因此上面的例子可以改写为：

// Correct
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));