react

2017-11-03 本文已影响0人柠檬不萌5120

react是什么?

react官网上说

React is flexible and can be used in a variety of projects. You can create new apps with it, but you can also gradually introduce it into an existing codebase without doing a rewrite.

react是灵活的，可以在各种项目中使用。您可以使用它创建新的应用程序，当然您也可以在不重写的情况下逐步将其引入到现有的代码库中。

总的来说：

React 是一个用于构建用户界面的 JAVASCRIPT 库。
React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

react的特点

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

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

虚拟DOM(virtual dom)：我们知道js执行很快，耗费性能的部分是操作dom， react引入virtual dom的概念，当数据变化时，采用优化diff算法，对比virtual dom差异，精准更新dom。

这样做，不但解决了频繁操作dom的性能问题，还解放了开发人员。开发者不需要关注某个数据的变化如何更新到一个或多个具体的DOM元素，而只需要关心在任意一个数据状态下，整个界面是如何render的，至于如何进行局部更新来保证性能，则是React要完成的事情。
除了性能的考虑，React引入虚拟DOM更重要的意义是提供了一种一致的开发方式来开发服务端应用、Web应用和手机端应用： image

因为有了虚拟DOM这一层，所以通过配备不同的渲染器，就可以将虚拟DOM的内容渲染到不同的平台。而应用开发者，使用JavaScript就可以通吃各个平台了。相当棒的思路！

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

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

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

1.虚拟DOM(virtual-dom)不仅带来了简单的UI开发逻辑，同时也带来了组件化开发的思想，所谓组件，即封装起来的具有独立功能的UI部件。React推荐以组件的方式去重新思考UI构成，将UI上每一个功能相对独立的模块定义成组件，然后将小的组件通过组合或者嵌套的方式构成大的组件，最终完成整体UI的构建。例如，Facebook的instagram.com整站都采用了React来开发，整个页面就是一个大的组件，其中包含了嵌套的大量其它组件，大家有兴趣可以看下它背后的代码。

2.如果说MVC的思想让你做到视图-数据-控制器的分离，那么组件化的思考方式则是带来了UI功能模块之间的分离。我们通过一个典型的Blog评论界面来看MVC和组件化开发思路的区别

3.对于MVC开发模式来说，开发者将三者定义成不同的类，实现了表现，数据，控制的分离。开发者更多的是从技术的角度来对UI进行拆分，实现松耦合。

组件化开发特性:React认为一个组件应该具有如下特征：
- 可组合（Composeable）：一个组件易于和其它组件一起使用，或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件，那么说父组件拥有（own）它创建的子组件，通过这个特性，一个复杂的UI可以拆分成多个简单的UI组件；
- 可重用（Reusable）：每个组件都是具有独立功能的，它可以被使用在多个UI场景；
- 可维护（Maintainable）：每个小的组件仅仅包含自身的逻辑，更容易被理解和维护；
- 可测试（Testable）：因为每个组件都是独立的，那么对于各个组件分别测试显然要比对于整个UI进行测试容易的多。

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

react怎么用？

首先需要引入三个最基本的js库：

react.js -React的核心库

react－dom.js -提供雨dom相关的功能

browser.js -作用是将 JSX 语法转为 JavaScript语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。

提供接口的dom节点
俩个重要的俩个对象ReactDOM.render()，React.createClass()

接下来先看一个最基本的案例：

es5书写形式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
<div id="example"></div>
<script type="text/babel">
    ReactDOM.render(
            <h1>Hello World</h1>,
        document.getElementById('example')
    )
</script>
</body>
</html>

es6书写形式：

import React, { Component } from 'react';
import ReactDOM, { render } from 'react-dom';

class App extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>Hello world</div>
        )
}
}
render(<App />, document.getElementById('app'));

参考文章可以见阮一峰老师的React入门实例教程

react

react是什么?

react的特点

react怎么用？

猜你喜欢

热点阅读