React一些必须要知道的基础

Posted 2020-08-28 爱coding

     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。