阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      React 组件特点

      • 以组件方式思考 UI 的构建
      • 组件的单一职责原则
      • DRY 原则(Don’t Repear Yourself)

      一、以组件方式思考 UI 的构建

      组件可以看做 PS 图层的文件夹,或 /链接类似;表示某一类东西,有点类似模块化的思想;每个组件看成一个单元;

      下面胆码中的 CommentBoxConmentListCommentForm 就是组件组成的组件树

      class CommentBox extends React.Component {
          render (){
              return (
                  <div className="comments">
                      <h1>Comments ({this.state.items.length})</h1>
                      <CommentList data={this.state.items}/>
                      <CommentForm />
                  </div>
              );
          }
      }
      

      理解 React 组件

      1. React 可以理解为一个纯函数,props是形参(非必须), 内部维护了一套state,生成View;

        props + state => View
        
      2. React 组件一般不提供方法,而是作为某种状态机;(你的状态什么,你的结果就一定是什么)

      3. 组件是单向数据绑定(外面想传数据只能通过传 props,外面想知道内部的状态,必须内部暴露出去,外面才知道)

      创建组件的思路

      1. 创建静态 UI(HTML+CSS)
      2. 考虑组件的状态组成
      3. 考虑组件的交互方式

      受控组件 VS 非受控组件

      这个主要是针对 From 里面的元素,针对范围很小;

      • 表单元素状态由使用者维护(可能的表现是:用户无法正常输入字符)

        <input
            type = 'text'
            value = {this.state.value} //value值不是用户输入来控制,而是组件本身change后传给使用者后,使用者来控制的;
            onChange = {evt=>{
                this.setState({value : evt.target.value})
                }
            }
        />
        
      • 表单元素状态 DOM 自身维护

        <input
            type = 'text'
            ref = {node => this.input = node }
        />
        

      二、组件的单一职责原则

      • 每个组件制作一件事
      • 如果组件变得复杂,那么应该拆分成小组件;
        • 优点一:拆分复杂度
        • 优点二:提高性能,如果是一个大组件,稍微改变点数据,整个组件都重新渲染,而分多个小组件,只更新相应的组件,这样对性能提高非常好;

      三、DRY 原则

      什么是 DRY

      DRY 也叫 OAOO;一次且仅一次(英语:Once and only once,简称 OAOO)

      DRY 原则的人,提取类里的“共同 field”,把它们放进一个父类,然后让原来的类继承这个父类;

      需要注意:DRY 的 repeat 是对于实现需求的重复,而不是单纯代码的重复,追求"抽象化",要求找到通用的解决方法;

      比如代码

      class A {
        int a;
        int x;
        int y;
      }
      
      class B {
        int a;
        int u;
        int v;
      }
      

      可以更改为下面这样

      class C {
        int a;
      }
      
      class A extends C {
        int x;
        int y;
      }
      
      class B extends C {
        int u;
        int v;
      }
      

      DRY 的原则

      • 能计算得到的状态就不要单独储存了;
        • AJAX 时候的 Loading,没有数据的时候就是 Loading,获取到数据就不存在 Loading 了;
        • 可以通过 AJAX 来判断是否 Loading,这时候就没必要再维护 Loading 了
      • 组件尽量无状态,所需数据通过 Props 获取;
      目录
      目录