我的react学习之行-03如何设计高质量的React组件

前言

在写这个博客系统的时候,觉得有必要讲一下react的一些知识,因为怕在文档中会涉及到很多有关react的事情,然后想着还是方便各位看官,免得去百度撒的,更重要的是为后面我直接写code只讲思想打基础,而不是每次都要顾虑语法等等。

设计组件的大体原则和方法

  1. 划分组件边界的原则
  2. react组件的数据种类
  3. react组件的生命周期

主要是要设计一个易于维护的组件。每一个组件就该有自己的要处理的事情。所以要拆分组件,其关键在于确认组件的边界。
要满足2个设计理念即高内聚、低耦合。

  • 高内聚:把逻辑紧密相关的内容放在一个组件中
  • 低耦合:不同组件之间的依赖关系要尽量弱化,就是每个组件要尽量独立

智慧组件与木偶组件

这是一个react在设计系统的时候两个非常重要的概念。智慧组件一般会放在src/containers中,而木偶组件一般会放在src/components中

  • 智能组件:它是数据的所有者,它拥有数据、且拥有操作数据的action,但是它不实现任何具体功能。它会将数据和操作action传递给子组件,让子组件来完成UI或者功能。也就是项目中的各个页面。

  • 木偶组件:它就是一个工具,不拥有任何数据、及操作数据的action,给它什么数据它就显示什么数据,给它什么方法,它就调用什么方法,比较傻。这就是木偶组件,即项目中的各个组件。

react-router

目前的版本已经到了v4,那么其中我们
React-router提供了一些router的核心api,包括Router, Route, Switch等,但是它没有提供dom操作进行跳转的api。

 
      
          
          
          
 

组件的数据

react的组件的数据分2种,prop和state。
prop:组件对外的接口
state:组件的内部状态

总的来说,对内用state,对外用prop.

prop

在react中,prop(property的简写)是外部传递给组件的数据,组件是通过接收prop来进行对外设置的。
在这里要提的是prop所支持的类型非常丰富,可以是字符串,数字,函数,对象等任何javasctipt支持的数据类型。当prop类型不是字符串的时候,在js中必须用{}把prop包起来。而且我们经常有回调函数,带上必要的参数,那么子组件就能够将值传给父组件。

设置props

比如一个组件SimpleBtton就是使用了id这个prop,这个看上去很像html的元素属性,但是在html中这些属性值只能是字符串型,但react组件的prop就支持javascript的所有数据类型。


当然啦SimpleButton的同时还可以传回调函数,这就给组件提供了反馈数据给到外部组件,这里一定要记住要加react.component的构造函数,那么组件内部又是如何获取传入的prop的呢?

class SimpleButton extends Component{
  constructor(props)//构造函数
  {
     super(props);
     this.id = props.id;
  }
}

这里要记住第一行通过super调用父类也就是react.component的构造函数.如果不调用,类实例的所有成员函数将无法通过this.props访问到父组件传过来的值

propTypes检查

propType检查只是开发的辅助功能,要注意。它的主要目的是告诉你,这个组件支持哪些prop,每个prop应该是什么格式。

store

组件在渲染的时候,除了prop还有state。由于prop是不能被修改的,为了记录组件自己的状态,特地使用state

setState

state不能直接用this.state修改只能使用setState

react组件生命周期

要设计一个较好的组件,那么就要对react的组件生命周期了解。
react大体上被分为:

  • 装载过程
  • 更新过程
  • 卸载过程

装载过程

  1. constuctctor:组件构造函数
  2. render:返回一个jsx描述的结构,最终还是由react来完成渲染

其他的后续再更新吧,目前还用不到

你可能感兴趣的:(web)