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

Posted 2023-02-25 AlexKing阁下

前言

在写这个博客系统的时候，觉得有必要讲一下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。

 <BrowserRouter>
      <switch>
          <Route exact patch='/' component = Home/>
          <Route path=`/detail/:id` component=Detail/>
          </switch>
 </BrowserRouter>

组件的数据

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 id="sample">

当然啦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来完成渲染

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