react入门

winner-one 2018-05-07 原文

react是什么

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

React主要用于构建UI

起源

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站

描述

`由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单`

这个项目本身也越滚越大，从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native

`项目，目标更是宏伟，希望用写 Web App 的方式去写 Native App。`

`如果能够实现，整个互联网行业都会被颠覆，因为同一组人只需要写一次 UI ，就能同时运行在服务器、浏览器和手机`

react的特点

`1.声明式设计 −React采用声明范式，可以轻松描述应用。`

`2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。`

`3.灵活 −React可以与已知的库或框架很好地配合。`

`4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。`

`5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。`

`6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。`

单向数据流

`在React中，数据的流向是单向的——从父节点传递到子节点，因为组件是简单而且易于把握的，他们只需从父节点获取props渲染即可，如果顶层组件的某个prop改变饿了，React会递归的向下便利整棵组件树，重新渲染所有使用这个属性的组件。`

声明式设计

    // 声明式
    const element1 = React.createElement(
        'div',
        {className:"greeting"},
        '哈哈'
    )
 
    // 过程式
    element2 = document.createElement 'div'
    element2.className = 'greeting'
    element2.innerHTML = '哈哈'
 
 
    // 类似于这样一种简化的结构
    const element = {
        type: 'h1',
        props: {
            className: 'greeting',
            children: 'Hello, world'
        }
    };
 
 
    ReactDOM.render(
        element1, 
        document.getElementById('root') 
    );

虚拟dom

虚拟dom 用于性能的提升

组件化

组件化，实现代码的重用

如何使用react

hello world示例

js核心库

react的使用离不开三个核心的库

 // 新版本
        <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <!--react的与dom相关的一些功能-->
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <!--将浏览器不支持的jsx语法转化为js语法-->
        <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
 
    // 久版本
        <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
        <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
        <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

hello world示例

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <!--react的核心库-->
        <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <!--react的与dom相关的一些功能-->
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <!--将浏览器不支持的jsx语法转化为js语法-->
        <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    </head>
 
    <body>
        <div id="root"></div>
        <!--    
            <script> 标签的 type 属性为 text/babel 。
                                     这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。
                                     凡是使用 JSX 的地方，都要加上 type="text/babel" 。
        -->
        <script type="text/babel">
 
            // ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。
            ReactDOM.render(
            <h1>Hello, world!</h1>, 
            document.getElementById('root') );
        </script>
    </body>
 
</html>

开发环境

<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 crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>