React备忘录

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 是异步的.
35.元素的key只有放在就近的数组上下文中才有意义.
36.状态提升即原来绑定在子组件上的处理事件,现在由父组件去处理,父组件定义好props的属性及处理属性改变的事件propsChange,将其绑定在子组件上,子组件通过this.props.propsChange去触发即可。

 

posted @ 2020-07-16 11:06  你风致  阅读(226)  评论(0编辑  收藏  举报