React官方文档阅读 -- 笔记

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 (
    

      {props.children}
    
  );
}
		

function WelcomeDialog() {
  return (
    
      

        Welcome
      
      

        Thank you for visiting our spacecraft!
      
    
  );
}

---

React的开发理念:

• 将 UI 拆分成组件, 拆分原则是组件的职责应尽可能的单一, 就好比如你何时需要去定义一个函数一样, 当一个组件的功能越来越丰富时, 你应该拆分出更小的组件.
• 根据如下三条规则确定某个数据是否要作为状态:
  1. 该数据是否会随着时间的改变而发生改变, 如果不是, 那么可能不是状态.
  2. 该数据是否可以从其他的 Props 和 State 推到出来, 如果可以, 那么可能不是状态.
  3. 该数据是否是从父组件中通过 Props 属性传递而来的, 如果是, 那么可能不是状态.