React简单介绍及应用

React是一个轻量版视图层框架，React 把用户界面抽象成一个个组件，如按钮组件 Button、对话框组件 Dialog、日期组件 Calendar。开发者通过组合这些组件，最终得到功能丰富、可交互的页面。通过引入 JSX 语法，复用组件变得非常容易，同时也能保证组件结构清晰。有了组件这层抽象，React 把代码和真实渲染目标隔离开来，除了可以在浏览器端渲染到 DOM 来开发网页外，还能用于开发原生移动应用，React官网推荐使用ES6编写。

特点：

1.声明式设计 −React采用声明范式，可以轻松描述应用。声明式是告诉计算机要去做什么而不管怎么做，而命令式是要描述如何去做。

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

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

4.JSX − JSX 是 JavaScript 语法的扩展。(对比模版引擎)

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

6.单向响应的数据流 − React 实现了单向响应的数据流，这也是它为什么比传统数据绑定更简单。

传统dom更新：

真实页面对应一个 DOM 树。在传统页面的开发模式中，每次需要更新页面时，都要手动操作 DOM 来进行更新。

虚拟dom：

DOM 操作非常昂贵。我们都知道在前端开发中，性能消耗最大的就是 DOM 操作，而且这部分代码会让整体项目的代码变得难以维护。React 把真实 DOM 树转换成 JavaScript 对象树，也就是 Virtual DOM。

React 为方便 View 层组件化，承载了构建 HTML 结构化页面的职责。从这点上来看，React 与其他 JavaScript 模板语言有着许多异曲同工之处，但不同之处在于 React 是通过创建与更新虚拟元素（virtual element）来管理整个 Virtual DOM 的。

JSX 将 HTML 语法直接加入到 JavaScript 代码中，再通过翻译器转换到纯 JavaScript 后由浏览器执行。在实际开发中，JSX 在产品打包阶段都已经编译成纯 JavaScript，不会带来任何副作用，反而会让代码更加直观并易于维护。

编译过程由Babel 的 JSX 编译器实现。

一、React项目（React专注于视图层）

1. React这种项目一般搭建需要三部分。

第一部分：A Package  manager包管理工具（例如npm 、yarn，安装第三方模块，以及包的依赖等）。

第二部分：Bundle打包器（例如webpack等，将很多css文件和js 文件打包成一个文件）。

第三部分：A compiler编译器（例如Babel 上线之前把ES6编译成Es5，主要为了使在所有浏览器中都能运行）

2. 详细过程

　　2.1  Npm install create-react-app(下载包依赖)

　　2.2   create-react-app my-app(创建一个my-app的react项目)

　　2.3   cd  my-app(切换到my-app文件夹下)

　　2.4    npm start（运行my-app项目）

3. my-app中的文件

　　3.1    my-app中有很多文件，其实最主要的文件就那么几个(publick-->index.html、src--->app.js、src---->index.js、package.json等)。

　　3.2    首先package.json文件存放下载的第三方模块以及安装包的依赖，这个是执行npm install后自动生成的。

　　3.3   Src目录下的文件才是我们要编写以及运行的文件。

　　3.4    Index.js是我们程序的入口文件，引入了react模块、reactDOM，还有APP.js文件，app.js文件是一个组件(页面组件化，页面的一部分为一个组件)。

4. index.js组成（react项目的一个入口文件的构成，必要的四部分，其他都可以不要）

4.1    引入react（代码：import   React   from   ‘react’）

4.2   引入reactDom (  代码：import   ReactDOM   from   ‘react-dom’ )

4.3   引入APP组件（代码：import   APP  from  ‘App’）

4.4   将App挂载在根节点root上，代码：ReactDOM.render(<App />, document.getElementById('root'));

备注：那么root在哪呢，root在根目录下的public文件夹下的index.html文件里面，默认访问public下的index.html文件。

5. App.js文件组成（用Esc6里面的class类继承React.Component）app.js文件是一个组件(页面组件化，页面的一部分为一个组件)。

5.1 先引入react（代码：import   React   from   ‘react’）。

5.2 引入所需的css文件（代码：import "./input.css"）

5.3 写class继承的React.Component(代码：class App extends Component {})

5.4 在类里面写react的生命周期函数

React的生命周期函数：constructor（初始化时执行的函数）、ComponentWillMount（）、render（）、ComponentDidlMount（）、shouldComponentUpdate（）、ComponentReceiveProps（）、ComponentUnMount（）等。

6. 在render生命周期函数中写JSX语法，通过return返回。（代码：render（）{ return （） }）render函数的返回结果，决定了页面到底要显示什么。

例如：

 render() {

　　return (

   　　<div>hello</div>

　　)

   }

待续.........

转载于:https://www.cnblogs.com/shwam/p/7832640.html