React备忘录

Posted 2020-12-16 xinyouhunran

1.React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 html 属性名称的命名约定。
例如，JSX 里的 class 变成了 className，而 tabindex 则变为 tabIndex。

2.JSX 防止注入攻击：React DOM 在渲染所有输入内容之前，默认会进行转义。

3.组件名称必须以大写字母开头。
React 会将以小写字母开头的组件视为原生 DOM 标签。
例如，<div /> 代表 HTML 的 div 标签，而 <Welcome /> 则代表一个组件，并且需在作用域内使用 Welcome。

4.组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props。

5.State 与 props 类似，但是 state 是私有的，并且完全受控于当前组件。

6.React生命周期（ReactApi中更为详细）
componentDidMount() 方法会在组件已经被渲染到 DOM 中后运行
componentWillUnmount()方法会在组件卸载的时候运行

7.不要直接修改state，而是采用setState()
构造函数是唯一可以给 this.state 赋值的地方

8.this.props 和 this.state 可能会异步更新，所以你不要依赖他们的值来更新下一个状态.
可以让 setState() 接收一个函数而不是一个对象。这个函数用上一个 state 作为第一个参数，将此次更新被应用时的 props 做为第二个参数.
this.setState((state, props) => ({}));

9.当你调用 setState() 的时候，React 会把你提供的对象合并到当前的 state。

10.“自上而下”或是“单向”的数据流.
任何的 state 总是所属于特定的组件，而且从该 state 派生的任何数据或 UI 只能影响树中“低于”它们的组件。

11.为了在回调中使用 `this`，在构造器中给指定函数绑定this是必不可少的
this.handleClick = this.handleClick.bind(this);
如果觉得使用bind很麻烦，可以使用一下两种方式：
class fields 语法：handleClick = ()=>{}或者
在元素上onClick = {()=>this.handleClick()}//这种可能会有渲染问题，我们通常建议在构造器中绑定或使用 class fields 语法来避免这类性能问题。

12.向事件处理程序传递参数分别通过箭头函数和 Function.prototype.bind
onClick={(e) => this.deleteRow(id, e)}
onClick={this.deleteRow.bind(this, id)}
在这两种情况下，React 的事件对象 e 会被作为第二个参数传递。
如果通过箭头函数的方式，事件对象必须显式的进行传递，而通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。

13.阻止组件渲染
你可以让 render 方法直接返回 null，而不进行任何渲染

14.key被绑定在类似map循环的回调函数中。

15.可以将数组传递到 value 属性中，以支持在 select 标签中选择多个选项：
<select multiple={true} value={[‘B‘, ‘C‘]}>

16.当需要处理多个 input 元素时，我们可以给每个元素添加 name 属性，并让处理函数根据 event.target.name 的值选择要执行的操作。

17.在受控组件上指定 value 的 prop 会阻止用户更改输入。
如果你指定了 value，但输入仍可编辑，则可能是你意外地将value 设置为 undefined 或 null。

18.推荐使用组合而非继承来实现组件间的代码重用
props.children就好似传递给组件的内容都包含了。

19.组件可以接受任意 props，包括基本数据类型，React 元素以及函数。

20.React.lazy 函数能让你像渲染常规组件一样处理动态引入（的组件）。
const OtherComponent = React.lazy(() => import(‘./OtherComponent‘));
应在 Suspense 组件中渲染 lazy 组件，如此使得我们可以使用在等待加载 lazy 组件时做优雅降级（如 loading 指示器等）
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
fallback 属性接受任何在组件加载过程中你想展示的 React 元素。

21.Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法，这个要结合Provider使用.
将 undefined 传递给 Provider 的 value 时，消费组件的 defaultValue 不会生效.
Context.Consumer也可以订阅到Context的变更

22.错误边界是一种 React 组件，这种组件可以捕获并打印发生在其子组件树任何位置的 javascript 错误，并且，它会渲染出备用 UI
错误边界仅可以捕获其子组件的错误,它无法捕获其自身的错误。如果一个错误边界无法渲染错误信息，则错误会冒泡至最近的上层错误边界

23.babel-plugin-transform-react-jsx-source此插件将打印错误发生的文件和行数

24.第二个参数 ref 只在使用 React.forwardRef 定义组件时存在。常规函数和 class 组件不接收 ref 参数，且 props 中也不存在 ref

25.React.Fragment,短语法<></>定义一个包裹碎片，避免页面多生成一些不必要的标签

26.JSX 仅仅只是 React.createElement(component, props, ...children) 函数的语法糖。

27.在 JSX 中，你也可以使用点语法来引用一个 React 组件。如MyComponents.DatePicker。

28.如果你没给 prop 赋值，它的默认值是 true。

29.false、true、null、undefined不会被渲染，但是数字 0，仍然会被 React 渲染。例如空数组length判断，不期望渲染，实则渲染，可以改成length>0。
想渲染 false、true、null、undefined 等值，你需要先将它们转换为字符串String（......）

30.Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。

31.Profiler 测量渲染一个 React 应用多久渲染一次以及渲染一次的“代价”。

32.当 ref 被传递给 render 中的元素时，对该节点的引用可以在 ref 的 current 属性中被访问。
使用 `ref` 的回调函数将 text 输入框 DOM 节点的引用存储到 React。
如果 ref 回调函数是以内联函数的方式定义的，在更新过程中它会被执行两次，第一次传入参数 null，然后第二次会传入参数 DOM 元素。

33.任何被用于告知组件需要渲染什么内容的函数 prop 在技术上都可以被称为 “render prop”.

34.在事件处理函数内部的 setState 是异步的