• react 复习


    1.组件名称必须以大写字母开头。

    2.建议从组件自身的角度命名 props,而不是依赖于调用组件的上下文命名

    3.“纯函数”,纯函数不会尝试更改入参,且多次调用下相同的入参始终返回相同的结果。所有 React 组件都必须像纯函数一样保护它们的 props 不被更改

    4.State 的更新可能是异步的,要解决这个问题,可以让 setState() 接收一个函数而不是一个对象。这个函数用上一个 state 作为第一个参数,将此次更新被应用时的 props 做为第二个参数:

    5. setState() 合并是浅合并,所以 this.setState({comments}) 完整保留了 this.state.posts, 但是完全替换了 this.state.comments

    6.React 事件的命名采用小驼峰式(camelCase),而不是纯小写。在 React 中另一个不同点是你不能通过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefault

    7.与运算符 &&:true && expression 总是会返回 expression, 而 false && expression 总是会返回 false。返回 false 的表达式会使 && 后面的元素被跳过,但会返回 false 表达式, { count && <h1>Messages: {count}</h1>} render 方法的返回值是 <div>0</div>

    8.如果条件变得过于复杂,那你应该考虑如何提取组件

    9.在组件的 render 方法中返回 null 并不会影响组件的生命周期

    10.当你创建一个元素时,必须包括一个特殊的 key 属性, 如果列表项目的顺序可能会变化,我们不建议使用索引来用作 key 值,因为这样做会导致性能变差,还可能引起组件状态的问题,一个好的经验法则是:在 map() 方法中的元素需要设置 key 属性。

    11.如果一个 map() 嵌套了太多层级,那可能就是你提取组件的一个好时机。

    12.受控组件:受控组件来说,输入的值始终由 React 的 state 驱动。<input type="text"><textarea> 和 <select> 之类的标签都非常相似—它们都接受一个 value 属性,你可以使用它来实现受控组件, 将数组传递到 value 属性中,以支持在 select 标签中选择多个选项,<select multiple={true} value={['B', 'C']}>

    13.文件 input 标签,<input type="file">因为它的 value 只读,所以它是 React 中的一个非受控组件

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

    15.包含关系:有些组件无法提前知晓它们子组件的具体内容,建议这些组件使用一个特殊的 children prop 来将他们的子组件传递到渲染结果中

    16.React 是用 JavaScript 构建快速响应的大型 Web 应用程序的首选方式。

    17.完全不应该使用 state 构建静态版本。state 代表了随时间会产生变化的数据,应当仅在实现交互时使用。所以构建应用的静态版本时,你不会用到它。

    18.通过问自己以下三个问题,你可以逐个检查相应数据是否属于 state:

    1. 该数据是否是由父组件通过 props 传递而来的?如果是,那它应该不是 state。
    2. 该数据是否随时间的推移而保持不变?如果是,那它应该也不是 state。
    3. 你能否根据其他 state 或 props 计算出该数据的值?如果是,那它也不是 state。

     

  • 相关阅读:
    docker 应用-1(安装以及基础命令)
    网桥原理及使用
    【年终总结】个人的2019年年终总结
    【bat批处理】批量执行某个文件夹下的所有sql文件bat批处理
    【实用工具】.fbr格式免费播放器 FBR格式 Free FlashBack Player
    【SQL骚操作】SqlServer数据库表生成C# Model实体类SQL语句
    【算法基础】面试过程中遇到的一些算法题输出杨辉三角
    【sql基础】按照名字分组查询时间最早的一条记录
    【面试题】java面试题整理(有空再贴答案)
    【海驾资料】海淀驾校科目三考试资料
  • 原文地址:https://www.cnblogs.com/ljh-zw/p/15239327.html
Copyright © 2020-2023  润新知