探索React（第一期）：组件和JSX

前言

看她一百遍，她不是你的。看书一百遍，知识就是你的。醒醒同志们，我们的任务是建设祖国！

JSX是什么

jsx 是 javscript + xml, 是一种 js 的扩展语法，最终会经过 babel 的转义。所以当我们输入 <div>hello world</div>的时候，Babel会把JSX转换成一个名为React.createElement()的方法调用，即React.createElement("div", null, 'hello world')。这里第一个参数必填，传入的是一个标签名称，第二个参数选填，表示的是属性，如className，第三个参数选填，表示的是子节点。 那么如果我们是多层标签嵌套的形式，Babel又会转换成什么样子呢？

const list = 
<div className="content">
  <div>
    <Text>666</Text>
  </div>
</div>

//babel
const list = React.createElement("div", {
  className: "content"
}, React.createElement("div", null, React.createElement(Text, null, "666")));

我们发现转换后也是层层嵌套的方式，同时需要注意React.createElement的第一个参数是我们的type属性，所以这也决定了JSX只能具有一个根元素。

React元素

React元素其实是一个普普通通的js对象，它里面有很多属性，用来描述元素的样子。

const element = <h1>123</h1>;
console.log(element);
const rootElement = document.getElementById("root");
ReactDOM.render(element, rootElement);

如上述代码所示，这样一个element其实就是一个React元素了，通过ReactDOM.render渲染出来，那么我们打印一下看看里面有什么玄机~~

这里的type即我们的h1标签，还有props属性，里面的children代表了我们的元素的内容。

React组件

React创建组件的方式分为两种，一种为函数式组件，也称无状态组件，这种组件只负责根据传入的props来展示，不涉及到state状态的操作，组件不会被实例化，不能访问this对象，不能访问生命周期的方法。
另外一种为类组件，也称有状态组件，这里有两种写法，一种是ES5的方式React.createClass，另外一种则是 E6继承形式 React.Component，这种组件是要被实例化的，并且可以访问组件的生命周期方法。
个人建议，只要有可能，尽量使用函数式组件的形式，毕竟组合优于继承~~

Fragment标签的使用

<table>
    <tr>
        <Cloumns />
    </tr>
</table>

// Cloumns组件
<React.Fragment>
    <td>hello</td>
    <td>world</td>
</React.Fragment>

我们上面说了由于React.createElement的限制，我们创建的React元素只能有一个根元素，但是当我们在封装表格组件的时候，如果Cloumns组件需要在外层包裹一个div的话，必然会破坏我们的样式，所以React给我们提供了React.Fragment，这样的话渲染出来的结果就可以不包含一个外层的div，同样我们也可以使用 <></> 来达到相同的效果~~