React一些必须要知道的基础

时间:2020-12-28 01:40:07

React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。

1、JSX语法

React 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

ReactDOM.render(
<div>
<h1>菜鸟教程</h1>
<h2>欢迎学习 React</h2>
<p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
</div>
,
document.getElementById('example')
);

我们可以在以上代码中嵌套多个 HTML 标签,需要使用一个 div 元素包裹它(有且只能有一个最外层标签),实例中的 p 元素添加了自定义属性 data-myattribute,添加自定义属性需要使用 data- 前缀。  

2、组件的应用

通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。React的核心就是组件,所谓组件,即封装起来的具有独立功能的UI部件。React推荐以组件的方式去重新思考UI构成,将UI上每一个功能相对独立的模块定义成组件,然后将小的组件通过组合或者嵌套的方式构成大的组件,最终完成整体UI的构建。例如,Facebook的instagram.com整站都采用了React来开发,整个页面就是一个大的组件,其中包含了嵌套的大量其它组件,大家有兴趣可以看下它背后的代码。下面我们来看一个组件的例子:

 var HelloMessage = React.createClass({
render: function() {
return <h1>Hello World!</h1>;
}
}); ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);

React.createClass 方法用于生成一个组件类 HelloMessage