react notes

jsx

1. 在JSX中嵌入用户输入是安全的,默认情况下， 在渲染之前, React DOM 会格式化(escapes) JSX中的所有值. 从而保证用户无法注入任何应用之外的代码. 在被渲染之前，所有的数据都被转义成为了字符串处理。 以避免 XSS(跨站脚本) 攻击
2. Babel 将JSX编译成 React.createElement() 调用
3. 用 JSX 指定子元素如果是空标签，您应该像 XML 一样，使用 />立即闭合它

元素渲染

1. React 元素是 不可突变（immutable） 的，一旦你创建了一个元素, 就不能再修改其子元素或任何属性。一个元素就像电影里的一帧: 它表示在某一特定时间点的 UI
2. 就我们所知, 更新 UI 的唯一方法是创建一个新的元素, 并将其传入 ReactDOM.render() 方法.
3. React DOM 会将元素及其子元素与之前版本逐一对比, 并只对有必要更新的 DOM 进行更新, 以达到 DOM 所需的状态

组件和属性

1. 组件就像JavaScript的函数。组件可以接收任意输入(称为”props”)， 并返回 React 元素，用以描述屏幕显示内容
2. 组件名称总是以大写字母开始
3. 不要害怕把一个组件分为多个更小的组件
4. props是只读的，所有 React 组件都必须是纯函数，并禁止修改其自身 props 。

state和生命周期

1. state 和 props 类似，但是它是私有的，并且由组件本身完全控制
2. 正确使用state：
   不要直接赋值修改state，只有在构造函数中；
   state更新可能是异步的，为了优化性能有可能会将多个 setState() 调用合并为一次更新，可以传函数(prevState, props)作为参数;
   state更新会被合并
3. 数据向下流动
4. state 只用于交互

处理事件

1. React 事件使用驼峰命名，而不是全部小写。通过 JSX , 你传递一个函数作为事件处理程序，而不是一个字符串
2. 参数 e 作为 React 事件对象将会被作为第二个参数进行传递。通过箭头函数的方式，事件对象必须显式的进行传递，但是通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。

条件渲染

1. 元素变量
2. 使用逻辑 && 操作符的内联 if 用法
3. 从组件的 render 方法返回 null 不会影响组件生命周期方法的触发。 例如， componentWillUpdate 和 componentDidUpdate 仍将被调用。

列表

1. 键(Keys) 帮助 React 标识哪个项被修改、添加或者移除了。数组中的每一个元素都应该有一个唯一不变的键(Keys)来标识
2. 如果列表项的顺序可能改变，我们不建议使用索引作为 keys。这可能会对性能产生负面影响，并可能导致组件状态问题
3. 一个好的经验准则是元素中调用 map() 需要 keys 
4. keys 在同辈元素中必须是唯一的

表单

1. 受控组件：其值由 React 控制的输入表单元素称为“受控组件”，如<input>，<textarea> 和 <select> 
2. 非受控组件：input（file），

状态提升