[干货]三大前端技术(React,Vue,Angular)探密

【引言】

前段时间写过一篇关于前端技术的概括性文章《前端技术的选择]》(http://3ms.huawei.com/km/blogs/details/7971337)，本文就对于当下顶级的前端开发技术做个相对详尽的探究，目的是为了解开这些前端技术的面纱，看看各自的庐山真面目。

【React】

React（也被称为React.js或ReactJS）是一个用于构建用户界面的JavaScript库。它由Facebook和一个由个人开发者和公司组成的社区来维护。

React可以作为开发单页或移动应用的基础。然而，React只关注向DOM渲染数据，因此创建React应用通常需要使用额外的库来进行状态管理和路由，Redux和React Router分别是这类库的例子。

基本用法

下面是一个简单的React在HTML中使用JSX和JavaScript的例子。

<div id="myReactApp"></div>

<script type="text/babel">

function Greeter(props) {

return <h1>{props.greeting}</h1>;

  }

var App = <Greeter greeting="Hello World!" />;

ReactDOM.render(App, document.getElementById("myReactApp"));

</script>

Greeter函数是一个React组件，它接受一个属性问候语。变量App是Greeter组件的一个实例，其中问候语属性被设置为 "Hello World！"。然后，ReactDOM.render方法将我们的Greeter组件渲染在DOM元素（id为 myReactApp）中。

在web浏览器中显示时，结果将是：

<div id="myReactApp">

<h1>Hello World!</h1>

</div>

显著特点

组件化

React代码由称为组件的实体组成。组件可以使用React DOM库渲染到DOM中的一个特定元素。当渲染一个组件时，可以传入被称为 "props "的值。

ReactDOM.render(<Greeter greeting="Hello World!" />, document.getElementById('myReactApp'));

React中声明组件的两种主要方式是通过功能函数组件和基于类的组件。

功能函数组件

功能组件是用一个函数声明，用来返回一些JSX。

const Greeting = (props) => <div>Hello, {props.name}!</div>;

类组件

基于类的组件是使用ES6类来声明的。它们也被称为 "有状态 "组件，因为它们的状态可以在整个组件中保持，并且可以通过props传递给子组件。

class ParentComponent extends React.Component {

state = { color: 'green' };

render() {

return (

<ChildComponent color={this.state.color} />

    );

  }

}