【React框架-1】React概览

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u011240016/article/details/84959599

什么是React.js?

• 用于构建用户界面的库
• 由Facebook创建维护
• MVC中的V
• 可以运行在Client && Server

虚拟DOM

• 虚拟DOM对真实的DOM进行了抽象，所以使得编程更加简单
• 是剪裁版的DOM，只更新这些DOM的部分
• 更快
• 单向数据流动

为何使用React.js?

• 简单 ：React管理所有的UI更新
• 声明式：知道刷新时只更新应用的一部分
• 可读性高，可重用：所有东西都被看作组件

JSX

• tag风格的语法，类似XML & HTML
• 推荐使用，但不强制

Babel编译器

• 将JSX代码翻译成JS
• 可以使用ES6风格语法
• 与Webpack协作良好，这是很棒的模块打包工具

<script type="text/babel">

示例：

var helloMessage = React.createClass({
	render: function() {
		return <div>Hello {this.props.name}</div>;
	}
});

ReactDOM.render(<HelloMessage name="John" />, 
	document.getElementById('app')
);

States & Props

• props: 组件间数据传递
• state: 组件的内部状态

当组件的state改变时，组件重新渲染，标记将会被更新，这样实现的效果就是比较动态的。

生命周期

React会在组件渲染或者更新时触发特定的函数：

• render: 渲染组件
• getInitialState:
• getDefaultProps
• componentWillMount
• componentDidMount

插件

• 辅助开发React.js应用的组件
• 动画组件
• 双向数据绑定组件
• 测试组件等

END.

参考：https://www.youtube.com/watch?v=vYldnghykaU&list=PLillGF-RfqbbKWfm3Y_RF57dNGsHnkYqO