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),
状态提升