前言
作为一个前端开发有些不好意思，居然还没有接触过 React ，就借这段时间积累下 React 相关经验，为疫情过后能有更多的就业机会。
如果你已经是个经验丰富的 React Developer 可能这系列文章不太适合你阅读。
虽然我承认下面大多数内容，基本都可以在官网找到原型。 但我会努力让你们尽可能不枉此行，如果有不对之处，望各位评论指出。
为了更好的阅读体验，你可以在底下的“了解更多”查看原文（访问我的语雀知识库）。
以下出现的代码，均可在我的码云中找到：https://gitee.com/eminoda/react-learn/branches
组件
在 React 中，组件就是一个 js 函数，通过对 UI 的细致划分，可以独立出可复用的代码片段。
可以通过最简单的 js 函数来定义。
也可以通过继承 React.Component 或 React.PureComponent 来定义 React Component。
当然后者通过类继承的方式，提供了更多组件特性。
组件分类
函数组件
函数组件就是使用 js 函数，来返回一个 React JSX 元素。
在此函数中接收一个 props 的参数，其是 JSX 上定义的一系列属性 attribute 。
示例：
页面展示：
class 组件
相反 class 组件复杂些，除了要继承 React.Component 类外，还要实现 render 方法：
后面会详细介绍 class 组件这块内容。
props 和 state
这两个是组件内出现率最高的实例属性，我们所有的逻辑实现基本都是依靠这两者。
props 示例
肯定已经注意到，无论是函数组件，还是 class 组件，它们内部的入参都是 props ，其就是在 JSX 中定义的属性内容，最后被解析到 props 里。
比如：我们定义一个 class 组件 Welcome，JSX 上定义一个属性 lang="React"
在组件内的 props 值为：
props 的只读性
props 也有自己的脾气，不能修改自身的 props 。如果你尝试那样，就会出现如下错误：
state 示例
组件内的 state 包含了随时可能发生变化的数据，所以如果有想实时更新的数据，建议用 state 来描述。
比如，我们有个 Clock 组件，内部有个定时器来实时刷新当前时间：
运行后，能看到页面对应的数据不停的在变化。
页面效果：
state 最佳实践
通过 setState 设置 state 对象，设置后，React 并不会立即更新组件，而是将设置推到更新的队列，在最后一次一起更新。
所以，在 setState 后来读取 state 对象不是明智之举。因为存在异不会推迟更新的原因。
通常使用 componentDidUpdate 、setState 的回调函数来取得最新的 state 值。
不要直接修改 state
修改 state ，需要调用 setState api ：
异步更新 state
例如，异步通过 ajax 拉取数据，会导致 state 取值不符合预期。或者重复的 setState 操作。
红框和绿框的结果不同（绿色符合预期），虽然他们都试图累加三次 num 。
总结
以上就是一个简单组件大致基础的概念，讲了实现组件的两种方式，以及说明内部出现的 props 和 state 有什么作用。
当然落地到平时写业务代码，还涉及如何在组件上定义事件、表单，以及如何显示条件和列表数据等基本的操作。
为了独立出更健壮的组件，还要懂得组件生命周期、高阶组件、错误边界等概念。
大块的细节还有很多，之后继续学习。
閱讀更多 前端雨爸 的文章
