React之特点及常见用法
Posted cc_ccc
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React之特点及常见用法相关的知识，希望对你有一定的参考价值。
1、什么是React？
React是一个用于构建用户界面的javascript库。主要用于构建UI，很多人认为Reatc是MVC中的V（视图）。
React起源于Facebook的内部项目，用来架构Instrgram的网站（ins，一款图片分享的社交软件），并与2013年5月份开源。
React拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。
2、React的特点？
（1）声明式设计
（2）高效：通过对DOM的模拟，最大限度的减少与DOM的交互。
（3）灵活：可以与已知的框架或库很好的配合。
（4）JSX：是js语法的扩展，不一定使用，但建议用。
（5）组件：构建组件，使代码更容易得到复用，能够很好地应用在大项目的开发中。
（6）单向响应的数据流：React实现了单向响应的数据流，从而减少了重复代码，这也是解释了它为什么比传统数据绑定更简单。
3、React的html的必备模板
<!DOCTYPE html>
<html>
<head>
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
// ** Our code goes here! **
</script>
</body>
</html>
(1) script 标签的 type 属性为 text/babel 。因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。
凡是使用 JSX 的地方，都要加上 type="text/babel" 。
(2) 三个库： react.min.js 、react-dom.min.js 和 Browser.min.js ，它们必须首先加载。
react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，
Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。
4、React JSX 的优点以及常见用法
React使用JSX来代替常规的javascript语法，看起来很像xml的javascript的语法扩展。
JSX优点:（1）JSX执行更快，因为它对编译js代码进行了优化（2）它是类型安全的，在编译过程中就能发现错误（3）使用jsx编译模板更加简洁快速。
使用JSX：
（1）代码中嵌套多个html标签，需要使用一个div元素包裹它们，实例中的p标签使用了自定义属性：data-前缀 。
ReactDOM.render(
<div>
<h1>菜鸟教程</h1>
<h2>欢迎学习 React</h2>
<p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
</div> ,
document.getElementById(‘example‘)
)；
（2）JSX表达式
ReactDOM.render(
<h1>{1+1*4}</h1>,
document.getElementById(‘example‘)
)；
（3）样式
React 推荐使用内联样式。我们可以使用 camelCase 语法（骆驼命名法，除第一个单词外的其他首字母大写）来设置内联样式.
React 会在指定元素数字后自动添加 px 。
var myStyle = {
fontSize: 100,
color: ‘#F00‘
};
ReactDOM.render(
<h1 style = {myStyle}>菜鸟教程</h1>,
document.getElementById(‘example‘)
);
（4）注释
注释需要写在花括号中:(外加div包裹)
ReactDOM.render(
<div>
<h1>菜鸟教程</h1>
{/*注释...*/}
</div>,
document.getElementById(‘example‘)
);
（5）数组
JSX 允许在模板中插入数组，数组会自动展开所有成员：
var arr = [
<h1>菜鸟教程</h1>,
<h2>学的不仅是技术，更是梦想！</h2>
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById(‘example‘)
);
（6）HTML 标签 vs React 组件
React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。
要渲染 HTML 标签，只需在 JSX 里使用小写字母的标签名。
var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById(‘example‘));
要渲染 React 组件，只需创建一个大写字母开头的本地变量。
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById(‘example‘));
React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签。
由于JSX 就是JavaScript，一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代，ReactDOM使用className和htmlFor来做对应的属性。
5、React State(状态)
React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。
以下实例中创建了 LikeButton 组件，getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。
当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。
参考文献：
阮一峰React入门实例教程 http://www.ruanyifeng.com/blog/2015/03/react.html
React解决了前端开发中的哪些痛点？ https://www.zhihu.com/question/39825457?sort=created
React.js 初学者应该知道的9件事 http://www.oschina.net/news/75530/9-things-every-reactjs-beginner-should-know
以上是关于React之特点及常见用法的主要内容，如果未能解决你的问题，请参考以下文章