react系列---------React简介（1）

React 简介：

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

React 主要用于构建UI，不少人认为 React 是 MVC 中的 V（视图）。

React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。

React 拥有较高的性能，代码逻辑很是简单，愈来愈多的人已开始关注和使用它。

 

React诞生的缘由

　　主要是当时市面上的这些框架都没法知足 facebook 公司的业务需求 (1. 数据量很大，数据很差管理 2. 页面DOM结构不能好复用)

facebook 内部工程师 想办法去解决这些需求，经过努力，找到解决方案，开源了 react。

 

笔试题： 谈谈react最显著的特色？

1.flux 统一管理数据的思想（高阶）

2.虚拟DOM概念（virtual DOM）：使用js对象的方式去描述一个真实的DOM元素，在后面数据变化后，让生成的新的虚拟DOM和旧的虚拟DOM，是 diff 算法进行比较，得出差别(patch)，而后把 patch 更新到页面上。

3.组件化：能够复用的代码提取出来，造成一个单独的结构。（1. 结构html标签 2. 样式 3. 造成 4. 数据state）

 

附：

首次引入虚拟DOM 概念（主要的缘由是，在前端没有引入MVC概念的时候，在jQuery存在的哪一个年代，你们都是DOM操做，经过DOM监听，DOM选取操做，若是操做量不大，也不会产生太大的问题，可是业务一旦复杂，数据量多，则这个时候若是继续DOM操做，仍是很消耗性能，浏览器的底层是作渲染和重绘是很消耗性能，咱们应该尽量减小重绘。主要的缘由是由于在开发的时候，有的时候，只有部分的数据发生变化，其实页面上主要的DOM结构尚未太大的变化，不少的DOM均可以复用）Facebook的工程师引入 虚拟DOM（使用javascript对象的方式去描述一个DOM结构，而后经过diff算法去比较新的虚拟DOM和旧的虚拟DOM，得出区别（patch 补丁） snabbDOM h函数 patch）。 注意：因为虚拟DOM的引入使得页面的加载性能获得显著的提高，以致于后面的一些其余的MVVM框架，都引入虚拟DOM的概念。例如 vuejs 就是借鉴了 react 里面的 虚拟DOM（virtual DOM）注意： 虚拟DOM的概念是Facebook的工程师想出来的。可是 底层 diff 算法不是Facebook独创，很早有了 diff 算法。

 

React解决了什么问题？

1. 数据统一管理 2. 性能提高 3. 代码复用

 

jsx语法

什么是jsx语法？

        jsx 翻译过来就是 javascript + xml。说白了就是容许开发者能够在 js 语境下直接写 html 代码（标签），不须要使用引号包裹。

为何引入jsx语法？

 答：咱们react引入虚拟DOM，可是使用react原生的  api 实现虚拟DOM，太麻烦了 React.CreateElement(tagName, tagAttr, tagContent)。 引入一种新的语法 jsx（javascript + xml） 说白了：能够在js语境下写 html 代码（其底层的缘由是使用webpack调用babel 进行转换）。咱们把jsx语法写的代码，称之为：jsx元素，jsx代码，react元素。

  jsx好处：方便开发者。

参考网址：https://zh-hans.reactjs.org/docs/introducing-jsx.html

 

库和框架有什么区别？（谈谈库和框架之间的区别？）

            jquery 这个是一个库；vuejs 是一个框架。 简单：库只是一个工具集合（里面封装不少的好用的函数、方法）。框架是一套成熟的解决方案（框架里面能够组织不少的库）。 vuejs 数据驱动，没有DOM操做（vuejs底层仍是要DOM操做，尤大大把底层DOM操做封装起来）。

 

 

React的组件：

 

什么是组件？　　组件说白了就是之后自定义的HTML代码片断（可能会高度复用的代码，提取出来，造成一个公共的代码块，能够复用）

组件的特色：         1. html结构（属性）render       2. 样式      3. 行为       4. 数据(1. props 2. state

为何要学习组件？        实现代码的复用。

如何学习组件？               在 react 里面组件分为两类（ 1. 函数式组件（无状态） 2. 类组件（有状态 state、无状态 ））

 

组件的分类：

1.函数式组件 ：  定义一个构造函数，而后函数首字母大写，其次返回值必须是一个合法jsx 元素。而且咱们把函数组件也叫无状态的组件。

2.类组件 ： 使用es6里面提供的class 关键字去定义一个类，可是这个类必须遵循两点（继承React Component 父类   必须定义render方法 ）。类组件若是存在state属性，则被称为有状态的组件，若是没有state属性，则被称为无状态组件。

 

 函数式组件

　　使用构造函数的方式去编写一个组件。

　　1.构造函数的首字母必须大写

　　2.函数的返回值是一个jsx 表达式

　　语法格式

function MyCompoent(){
    return (
        <div>
            ....
        </div>

    )
}

　　

   类组件

      使用class关键字去定义一个组件，这个组件叫作类组件。

  class 这个关键字是 es6 引入的语法糖，其实就是对构造函数的一个封装。在其余的面向对象语言里面，class 关键是定义一个类。

  extends 关键字是 es6 里面引入一个新的特性，能够实现类的继承。解决es5里面的原型链的继承问题。

注意  ： 在 react 里面若是要使用类组件，则该组件必须先继承react提供的一父组件。React.Component

注意  ：   类组件必须定义一个 render 方法。返回的返回值是一个 jsx 表达式

      语法：

class MyDiv extends React.Component {

    render(){
        return (
            <div>
                .....
            </div>
        )
    }
}

 

       组件的样式：

1.行内样式style     给行内的 style 属性的属性值应该是一个对象。传递的时候是一个 {{color: 'red' }} 第一个大括号，表明定义一个js语境，第二个大括号表明传递的是一个对象。

2.class类名         （注意：html里面咱们可使用class定义类名，可是在js语境下 class 是关键字，不能随便用，则咱们把样式的类名换成 className）只须要在组件内部经过 import 方式直接导入一个外部的css文件。（脚手架的底层使用css-loader解决css依赖）

 

     属性的传递：

       有的时候，咱们但愿在外部能够给组件传递一点数据，则咱们称为属性传递，在调用方经过属性的方式传递数据便可。在组件这边若是是构造函数组件，则咱们能够经过构造函数的形参来接受传递的数据（形参名称通常使用 props，翻译过来就是属性。）若是咱们的组件是类组件，则咱们能够经过 this.props 属性获取传递过来的属性信息，同时若是咱们的类组件定义 construtor 构造方法，则咱们的构造方法也能够接受一个参数 props，表明调用方给组件传递的属性。

 

　组件的行为：

行为就是咱们所说的事件，在原生js当中，事件绑定有三种：

1.行内绑定   

2.外部绑定     document.getElementById('btn').onclick = function(){}

3.事件监听     document.getElementById('btn).addEventListen('click', fn, false);

注意：：可是在React里面只支持行内绑定。

在React 绑定事件  ：1. 事件的名称必须大写，on事件类型(onClick onChange)

　　　　　　　　　  2.事件的回调函数必须是一个函数，这个注意（1. event 2. this指向问题）

 

 

 React 的 使用：

          react 的使用须要使用一个官方提供的脚手架进行开发。不像vuejs 直接引入一个 vue.js 文件就可使用。脚手架的底层使用的 webpack，把 react 里面的一些新特性写的代码作了转换，转换成浏览器能够识别的代码，例如 react 引入一种叫作 jsx 的语法。

npm init -y
npx create-react-app my-app
cd my-app
npm start
注意1 ：npx 表明是局部安装后面的脚手架 
create-react-app

脚手架提供的经常使用的命令

yarn start 用于在本地启动一个测试服务器：3000端口
yarn build 用于打包，打包后的文件能够直接上线
yarn test  用于前端测试
yarn eject 用于把 webpack 配置文件导出（create-react-app 底层就是 webpack

 

 扩展阅读：：

1. https://blog.csdn.net/hhthwx/article/details/80071056
2. https://www.jianshu.com/p/ad533d71f79e
3. http://www.javashuo.com/article/p-xalnpppf-k.html