• 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 是异步的

  • 相关阅读:
    上周热点回顾(11.1611.22)
    程序员求职招聘专题上线了
    上海地铁爱知书店博客园专柜
    上周热点回顾(11.911.15)
    求职与简历功能上线测试
    上周热点回顾(11.2311.29)
    软件工程:软件测试
    [文摘20100706]几种Web服务器比较 (Apache、IIS、Lighttpd、Nginx、LiteSpeed、Zeus)
    [转]CMMI的5个级别和25个过程域
    网上进销存几个参考网站
  • 原文地址:https://www.cnblogs.com/xinyouhunran/p/13219237.html
Copyright © 2020-2023  润新知