React框架
React 起源于 Facebook 的内部项目，起初facebook在建设instagram（图片分享）的时候，因为牵扯到一个东西叫数据流，那为了处理数据流并且还要考虑好性能方面的问题。对市场上的各种前端MVC框架进行了研究。然后对市场上所有JavaScript MVC框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。
React框架特点
我们以前操作dom的方式是通过document.getElementById()的方式，这样的过程实际上是先去读取html的dom结构，将结构转换成变量，再进行操作。
而reactjs定义了一套变量形式的dom模型，一切操作和换算直接在变量中，这样减少了操作真实dom，性能真实相当的高，和主流MVC框架有本质的区别，并不和dom打交道
React与传统MVC的关系
React不是一个完整的MVC框架，最多可以认为是MVC中的V（View），甚至React并不非常认可MVC开发模式；React 构建页面 UI 的库。可以简单地理解为，React 将将界面分成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，就成了我们的页面。
React Fiber
react 16.x版本之后搞出来一个Fiber协调引擎，是为了解决浏览器渲染组件，因为是同步进行的，造成浏览器卡顿问题。
React Fiber的方法其实很简单——分片。把一个耗时长的任务分成很多小片，每一个小片的运行时间很短，虽然总时间依然很长，但是在每个小片执行完之后，都给其他任务一个执行的机会，这样唯一的线程就不会被独占，其他任务依然有运行的机会。
就比如有一桌菜，之前是你只能吃完一份才去吃另一份，用fiber算法之后，你可以同时吃几份菜，时间虽然是一样的，凡是线程不会被独占
构建React环境
react开发需要引入多个依赖文件：react.js、react-dom.js，babel-standalone分别又有开发版本和生产版本
react.js：中有React对象，帮助我们创建组件等功能
react-dom.js：中有ReactDOM对象，渲染组件的虚拟dom为真实dom的爆发功能
babel-standalone：在编写react代码的时候会大量的使用到jsx代码，但是编译需要借助babel
安装环境
官网提供了很多安装方式：
- 直接下载
1）进入项目文件夹，在控制台运行
npm init -y
npm i react react-dom babel-standalone
2）下载完成后在下面的路径中找到依赖文件，引入到html文件中
(react/umd/react.development.js)
(react-dom/umd/react-dom.development.js)
(babel-standalone/babel.min.js)
- 引用网上的链接
<!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
核心概念
元素渲染
<!DOCTYPE html>
<html>
<head>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script src="./js/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<!-- 这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/babel" -->
<script type="text/babel">
ReactDOM.render(<div>
<p>Hello, world!</p>
</div>,document.getElementById("app"))
</script>
</body>
</html>
上面代码将一个 p 标题，插入 app 节点，运行结果如下。
jsx
jsx背后的原理？
jsx-->babel(React.createElement)--->虚拟dom（js内存对象）---> ReactDOM.render() 将虚拟dom渲染成真实domjsx内部借鉴了xml一些语法规范，标签必须是闭合的、只能有一个根元素
jsx中注释需要 {/jsx代码/}
Babel会把jsx代码转译成一个名字React.createElement()方法进行调用
<body>
<div id="app">
</div>
<script type="text/babel">
//写法一比较麻烦
// const a = React.createElement(
// 'div',
// {},
// React.createElement('h2',{className:'abc'},"我是h2"),
// React.createElement('p',{},"我是p"),
// );
//声明变量方式
const a = <div><h2 className='abc'>我是h2</h2><p>我是P标签</p></div>
ReactDOM.render(a,document.getElementById("app"))
</script>
</body>
渲染变量
react中通过{}来渲染变量 （只要写js代码了，就需要通过引入{}语法）
null | undefined | boolean 都不会在{}中进行渲染
数组会渲染成字符串
注意： {}中不能直接放入对象类型！ json对象不能扔进去，报错！
下列的写法是ok的
const a = 10
ReactDOM.render(<div>
<p>{a}</p>
<p>{"hello".substr(0,2)}</p>
<p>{[1,2,3]}</p>
<p>{function(){alert(2)}()}</p>
</div>,document.getElementById("app"))
事件处理
- React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
- 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。
<script type="text/babel">
const app = <div><button id="btn" onClick={()=>alert('点击成功')}>点击</p>
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button></div>
ReactDOM.render(<div>{app}</div>,document.getElementById("app"))
</script>