在上一篇博客中，我们有提到，React 中的核心就是组件，那么这一篇博客，就让我们来了解下组件：
首先，所有的 React 组件都是以 class 的形式来写的：
这样，我们就定义了一个组件 Cmp1。
但是我们现在要写的是 React 组件，而并不是一个普通的 class，那么它一定有一些组件所特有的一些功能。
比如，React 组件里面有状态，有事件，有属性等等，所以我们这个 class 不能从零开始，去写一个空的 class。
那么我们就需要继承自 React 里面的 Component 。
实际上，所有的 React 组件都是继承自 React.Component，而 Component 它里面带了很多组件所公有的一些东西，比如渲染，接收参数，生命周期等等。
并且所有的 class 都得有 constructor，然后我们需要做的很简单，就是把各种各样的参数，给接收起来，然后统一的丢给父级，来完成初始化的工作。
如果你已经看过 React 的官方文档，在这里可能会有个疑问：官方写组件的时候，一般都是传的 props：
那么这两种写法有什么不一样吗？
首先，我们需要知道一点，就是正经的 React 组件它其实就只接收一个参数 props。
那么这里用 ...args 的写法，肯定也是能兼容的，因为这种写法是有多少参数，就接收多少参数。
那为什么要这样写呢？
我们现在是通过直接继承 Component 来写组件，那 ...args 和 props 其实并没有什么本质上的区别。
但是我们要考虑到一个扩展的问题：就是将来我们其实是要，从组件上再来继承组件的。
那么一旦到了这个时候，其实我们就有可能会多出一些参数来。
那么在这种情况下，我们用 props 就会显得不方便了。
然后，接下来，我们还需要一个东西 render。
因为对于 React 来说，它认为所有的组件，都应该能显示在页面当中，那这时候自然也就需要一个渲染的动作。
那么肯定有人会说，我这个组件它只是用于和服务器通信，它并不需要在页面上显示什么东西。
那如果是这样的话，可能就不适合写成组件了，说的直白一点，它不适合写成 Component。因为 Component 就是在页面当中，比如按钮，表格等等这一类的东西。
如果你真的是一个只在内存当中去做一些事，而并不需要显示。那么其实你更适合用普通的 class，而没有必要去继承 React.Component。
反正一句话，所有的 React 组件，都必须得有 render 渲染这个方法。
而渲染里面就直接的去 return 你要的代码：
这样，我们就已经写完了一个最基本的组件，接下来我们怎么去用它呢？
因为 Cmp1 没有子组件，所以我们把它写成单标签 <Cmp1/> 是没问题的。
万一有子组件的话，那我们就在它里面接着写 <Cmp1></Cmp1>。
在 React 里面，组件既可以写成单标签，也可以写成双标签，取决于你内部有没有内容。
然后我们再来看下模板，简单来说就是花括号 { }。
花括号 { } 在 React 里面，代表输出。
比如，我期望输出一个变量 a 的值：
那如果不是变量，而是定义的属性呢？
所以，在花括号 { } 里面，只要是符合 jsx 语法的东西，都可以。（也就是 js 语法）
如果我们需要动态的给一张图片添加 src 地址呢？
可以看到，是读不出来的，如果这里用双引号去写的话，它其实就是个字符串。
而我们希望的是一个变量，所以这里也需要用到花括号 { }。
所以花括号 { } 既可以往内容里面直接输出，也可以往标签的属性上面输出。
平时我们在用 React 的时候，render 函数是要 return 一个东西的。
这里需要注意一下：在 js 里面， return 是有问题的。
我们一起来看几个例子就明白了：
左边的例子，相信大家都没问题。
右边的例子，换个行，返回值就是 undefined 了。
这里需要注意的是，在 js 里面， return 是不能换行的。
那其他地方，变量声明赋值的换行有影响吗？
可以看到，变量声明赋值的换行是没有影响的。
那逻辑的换行呢？
可以看到，即使我们随便换行，换的乱七八糟，依旧是没问题的。
实际上来说，语法层面对换行来说，是没要求的。就唯独一个东西，就是 return。
return 后面不能换行，换行它就认为你要返回一个空，也就是 undefined。
所以 js 里面的 reutrn 有问题，不能换行。
其实我们平时写 React，在 render 里面写 return 的时候，一个不小心，就会写成这样：
这样是出不来的，你可以看到页面显示是空白的，并且控制台报了一对错，说你的 render 没返回东西。
基本每一个用 React 的人都在这里踩过坑，因为不换行 html 代码写起来和看起来会比较难受。
那有什么办法可以换着行来写吗？
我们可以加一个括号 ( )，因为加括号和不加括号，其实语法层面上是没有区别的。
可以看到，这样是能出来的。加个括号 ( ) 代码既好看，而且又符合它不换行的要求。
所以，React 里面的组件怎么写其实很简单，我们只需要注意下面几件事就可以了：
1，所有的组件，必须得继承自 React.Component。
2，所有的组件，必须有 constructor 且 super 父级，否则状态 state 等功能无法使用。
3，组件必须要有 render() 方法，并且 return 需要注意换行的问题（加个括号可以解决）
4，组件名，也就是 class 类名首字母必须大写，小写会报错。（简单来说它会认为：如果你是小写标签，那么你应该是个 HTML 标签）
5，组件使用的时候，单双标签都可以。（双标签闭合、单标签结尾加 / ）
组件会写了，那怎么给组件传值呢？
实际上组件这个东西，如果它一切都是写死定好的，那这个时候，其实它的应用是受到极大的限制的。
所以我们需要能够往它里面传东西，比如现在我们往 Cmp1 组件身上传一个 abc 属性，它的值是 xyz。
那么在组件内部，我们如何获取属性身上的东西？
我们需要用到 props。
props 就是 properties 的简称，就是属性的意思。
你可以理解为，props 就是一个 json，你给一个组件传的所有属性，React 都会往这个 json 身上放。
所以我们用的时候，只需要 this.props.xxx 就可以了。
最后，在 React 里面有一个地方比较特殊，就是我们平常在写 html 的时候，有些时候是需要用到 style 的。
那么 React 里面的 style 这么写，让我们一起来看看：
可以看到，我们以前的写法是出不来的。
还报了一堆错，它大概的意思就是说 style 这个属性，它期待着一个 mapping，而不能是字符串。
mapping 其实就是映射，说白了就是 json。
不知道大家平常写 css 的时候，有没有注意到：样式其实就有点类似于 json。
.box {
width: 200px;
height: 200px;
color: red;
}
/* .box 的值不就是 { ... } 这样一个 json 吗？ */而现在再 React 里面，我们是需要这样来写的：
所以我们知道了，在 style 里面，我们必须得传一个 json。
那么你肯定会有一个疑问：React 里面不都是一个花括号 { } 吗，为什么 style 这里是两个花括号呢？
其实这只是一个错觉。如果我换一种写法，就很容易理解了：
我这里将一个 json 单独的存到一个变量里面，并且把这个变量输出过去。可以看到，上面的效果是一样的。
所以外面的一层花括号 { } 是 React 的。因为如果你希望给组件传的参数，是数字、json 或者变量这样的东西，就必须得用 { }，否则到里面的都是字符串。
其次，里面这层花括号 { }，其实根本就不是 React 的，它是 json 的。
表面上看起来是两层花括号，其实不是，它只是恰好而已。如果你要传的是一个数组，它就是 { [ ] } 这样的东西了。
