JSX 简介:
- 一个 jsx 标签属于一个 object, 其会被 babel 转换成 React.createElement 方法的调用.
元素渲染:
- React 元素都是immutable 不可变的。当元素被创建之后,你是无法改变其内容或属性的。
- 在实际生产开发中,大多数React应用只会调用一次 ReactDOM.render() 。
- React 在重新渲染一个组件时, 会在底层使用 diff 算法, 在 React 的 虚拟 DOM 中对比出差异性, 然后在真实 DOM 中只会渲染差异的部分.
组件和Props:
- 用户自定义组件首字母必须大写.
- 组件的返回值只能存在一个根元素.
- Props 是只读的.
- 所有的React组件必须像纯函数那样使用它们的props。
State 和 生命周期:
-
状态是私有的,完全受控于当前组件。
-
使用状态需要注意的四点:
1. 只能在构造函数中初始化状态.
2. 不能直接更新状态, 必须要调用 setState 方法.
3. 状态更新时异步的.
4. 状态的更新是浅合并更新. -
数据自顶向下流动, 父组件和子组件都不应该知道某个组件是否是有状态的.
-
把 JSX 树比作成整个 props 的瀑布, 那么可以把 state 比作成这个瀑布中的额外的水源, 它们也随着瀑布往下流.
事件处理:
- 不能通过给事件处理程序返回 false 来阻止事件的默认行为.
- 要谨慎对待事件处理程序中的 this 引用问题, 使用属性赋值语法来避免.
- 向事件处理程序传递参数, 可以使用箭头函数, 也可以使用 bind 方法, 应尽可能的使用 bind方法, 此方式 event 是隐士传递到事件处理程序的最后一个参数.
条件渲染:
- JSX 中可以使用任何 JavaScript 表达式, 使用 “{}” 包围即可.
- ==JavaScript 中, && 预算符, 在第一个表达式为 true 时, 总是会返回第二个表达式.
- 通过在组件的 render 方法中返回 null 可以让组件不渲染, 但是组件的生命周期方法仍然会得到回调.
列表&Key:
- 当使用数组的 map 来渲染多个 li 或者其他标签时, 需要给每一个标签添加一个 key 属性, key 属性应该在同级的兄弟节点之间唯一.
- 一个好的大拇指法则:元素位于map()方法内时需要设置键属性。
表单:
- 其值被 React 控制的输入表单控件叫做受控组件.
- input 的 type 为 file 类的组件由于其 value 是只读的, 因此是非受控组件.
状态提升:
- 当某个组件需要状态是, 通常是先将其设定在这个组件中, 如果此时另外一个组件也需要此状态, 那么需要把这个状态提升至离这个组件最近的父组件中.
- 状态提升使用到了类似于受控组件的方式.
组合VS继承:
- 在 React 中, 可以使用 props.Children 属性来引用 JSX 的子节点元素. 试列如下:
function FancyBorder(props) {
return (
<div className={'FancyBorder FancyBorder-' + props.color}>
{props.children}
</div>
);
}
function WelcomeDialog() {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">
Welcome
</h1>
<p className="Dialog-message">
Thank you for visiting our spacecraft!
</p>
</FancyBorder>
);
}
React的开发理念:
- 将 UI 拆分成组件, 拆分原则是组件的职责应尽可能的单一, 就好比如你何时需要去定义一个函数一样, 当一个组件的功能越来越丰富时, 你应该拆分出更小的组件.
- 根据如下三条规则确定某个数据是否要作为状态:
1. 该数据是否会随着时间的改变而发生改变, 如果不是, 那么可能不是状态.
2. 该数据是否可以从其他的 Props 和 State 推到出来, 如果可以, 那么可能不是状态.
3. 该数据是否是从父组件中通过 Props 属性传递而来的, 如果是, 那么可能不是状态.