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渲染成真实dom

jsx内部借鉴了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>

请用今天的努力，让明天没有遗憾。