React

React是一个用于构建用户界面的js库

1、React由来:

facebook团队内部项目，2013年5月份开源

2、React特点：

• 声明式
• 组件化
• 一次学习，随处编写

React在16.x版本后发布了一个Fiber协调引擎，采用增量式渲染，内部使用分片思想，解决diff算法同步更新导致的浏览器卡顿问题。

3、引入：

npm init -y 创建package.json配置文件
npm i react react-dom babel-standalone -S

本地引入：

<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>

CDN引入：

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

注：将script的type属性变成： text/babel才可以解析< 符号

Hello World案例：

```javascript
<div id="app"></div>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script src="./js/babel.min.js"></script>
<script type="text/babel">
  console.log(ReactDOM);
  // 用于将模板转为 HTML 语言，并插入指定的 DOM 节点。
  ReactDOM.render(<h1>Hello World！</h1>,document.getElementById("app"))
</script>

4、jsx编译原理

jsx代码：JavaScript+Xml Babel会把jsx转译成一个名为React.createElement()函数使用

注意：

• jsx中只能有一个根元素!
• jsx标签需要闭合
• jsx注释{ /* jsx代码 */ }

原理：开发阶段只需要写jsx代码，内部的化通过babel将jsxx转译成虚拟dom，最后通过ReactDOM.render进行虚拟dom渲染成真实DOM

<div id="app"></div>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script src="./js/babel.min.js"></script>

<script type="text/babel">
  // let el = <div><h1 className="h1">Hello world!</h1><p>我是标签p</p></div>
  let el = React.createElement('div',{},
    React.createElement('h1',{className:"h1"},'Hello World!'),
    React.createElement('p',{},'我是标签p')
  )
  ReactDOM.render(el,document.getElementById("app"))
</script>

5、表达式

{ }：

react中可以通过{ }的形式渲染一个变量表达式{ }中null/undefined/boolean是不会显示的。 表达式中如果放入数组，内部拼接成字符串。

注意:

表达式中不能直接放入json对象

let a = 100
ReactDOM.render(<div>
  <p>{ a }</p>
  <p>{ false }</p>
  <p>{ '10' }</p>
  <p>{ [1,2,3] }</p>
  {/*<p>{ {a:1} }</p>*/}
  <p>{ function(){return 3}() }</p>
</div>,document.getElementById("app"))

结果：