react notes
jsx
- 在JSX中嵌入用户输入是安全的,默认情况下， 在渲染之前, React DOM 会格式化(escapes) JSX中的所有值. 从而保证用户无法注入任何应用之外的代码. 在被渲染之前，所有的数据都被转义成为了字符串处理。 以避免XSS(跨站脚本)攻击
- Babel 将JSX编译成
React.createElement()调用 - 用 JSX 指定子元素如果是空标签，您应该像 XML 一样，使用
/>立即闭合它
元素渲染
- React 元素是不可突变（immutable）的，一旦你创建了一个元素, 就不能再修改其子元素或任何属性。一个元素就像电影里的一帧: 它表示在某一特定时间点的 UI
- 就我们所知, 更新 UI 的唯一方法是创建一个新的元素, 并将其传入
ReactDOM.render()方法. - React DOM 会将元素及其子元素与之前版本逐一对比, 并只对有必要更新的 DOM 进行更新, 以达到 DOM 所需的状态
组件和属性
- 组件就像JavaScript的函数。组件可以接收任意输入(称为”props”)， 并返回 React 元素，用以描述屏幕显示内容
- 组件名称总是以大写字母开始
- 不要害怕把一个组件分为多个更小的组件
- props是只读的，所有 React 组件都必须是纯函数，并禁止修改其自身 props 。
state和生命周期
state和props类似，但是它是私有的，并且由组件本身完全控制- 正确使用state：
不要直接赋值修改state，只有在构造函数中；
state更新可能是异步的，为了优化性能有可能会将多个setState()调用合并为一次更新，可以传函数(prevState, props)作为参数;
state更新会被合并 - 数据向下流动
- state 只用于交互
处理事件
- React 事件使用驼峰命名，而不是全部小写。通过 JSX , 你传递一个函数作为事件处理程序，而不是一个字符串
- 参数
e作为 React 事件对象将会被作为第二个参数进行传递。通过箭头函数的方式，事件对象必须显式的进行传递，但是通过bind的方式，事件对象以及更多的参数将会被隐式的进行传递。
条件渲染
- 元素变量
- 使用逻辑 && 操作符的内联 if 用法
- 从组件的
render方法返回null不会影响组件生命周期方法的触发。 例如，componentWillUpdate和componentDidUpdate仍将被调用。
列表
- 键(Keys) 帮助 React 标识哪个项被修改、添加或者移除了。数组中的每一个元素都应该有一个唯一不变的键(Keys)来标识
- 如果列表项的顺序可能改变，我们不建议使用索引作为 keys。这可能会对性能产生负面影响，并可能导致组件状态问题
- 一个好的经验准则是元素中调用
map()需要 keys - keys 在同辈元素中必须是唯一的
表单
- 受控组件：其值由 React 控制的输入表单元素称为“受控组件”，如
<input>，<textarea>和<select> - 非受控组件：input（file），
状态提升
优质内容筛选与推荐>>1、angular的$compile
2、关于always块内for循环的执行方式
3、UGUI 哪些显示在前方的问题
4、重入性和不可重入性
5、谈下python的GIL