JSX渲染原理

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
转换后为：

<div>
    <h1 style='color: red' className='title'>todo with react</h1>
    <ul>
      <li>a</li>
      <li>b</li>
    </ul>    
</div>
转换后为：

createElement():React在渲染解析的时候，会把所有的html标签都转换为(返回一个对象):
返回对象的格式：
{
　　type: 'div' 　　---存储的是标签名或者组件名
　　props: {　　　　---props: 属性对象（给当前元素设置的属性都在这里）(如果有子元素，会多一个children属性，依次把子元素传递进来，没有就没有children属性)
　　　　style: '',
　　　　className: '',
　　　　children: [] 可能有可能没有，有的话：可能是一个数组，也可能是一个字符串或者是一个对象。
　　},
　　key: null,
　　ref: null
}
例如上面的jsx语法会返回：
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'
  }
};

render(jsx,container,callback)

render(<h1>标题</h1>, document.getElementById('root'));

主要接受三个参数:
- jsx:javascript xml(html) react独有的语法；虚拟DOM（virtual dom）
- container:虚拟DOM最后渲染到的容器，不建议是body
- callback:把虚拟DOM插入到页面中，触发的回调函数（已经成为真实的DOM）

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));



App.js

import React from 'react';

function App() {
return (
　　　　//jsx语法:允许在js代码中直接写入html标签，并且可以在html标签中写入js表达式。
　　　　<div>
　　　　　　{2 + 1}，hello react
　　　　</div>
　　);
}

function Title() {
　　return (
　　　　<div>
　　　　　　<h2>新闻列表</h2>
　　　　</div>
　　);
}

import React from 'react';
class Title extends React.Component{
　　constructor(props){
　　　　super(props);
　　}
　　render() {
　　　　return (
　　　　　　<div>
　　　　　　　　<h2>新闻列表</h2>
　　　　　　</div>
　　　　);
　　}
}
export default Title;

1.单闭合调用（只能传props的值）

这些都是等价的

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

<div>
  {showHeader && <Header />}　　//该JSX只会在showHeader为true时渲染<Header />组件。
  <Content />
</div>