ReactJS入门指南

时间 2019-11-08

标签 reactjs 入门指南繁體版

原文原文链接

ReactJS入门指南html

　　本文旨在介绍ReactJS的基本知识，并一步步详细介绍React的基本概念和使用方法等，以及相应的Demo。本文在很大程度上参考了React官方文档和官方指南。若是你英语还不错，大可直接去官网查看对应的英文文档和指南，写的很是不错；但若是你的英语跟我同样蹩脚或者不喜欢直接读文档，那么但愿这篇文章可以给你带来帮助。若是你用React好久了，刚好你也看到这篇文章，欢迎指正错误！若是你不乐意看一大片文字，想直接看程序，那么直接戳这里！react

　　一、React是什么？git

　　React是由工做在Facebook的优秀程序员开发出来的用于开发用户交互界面的JS库。其源码由Facebook和社区优秀的程序员维护，所以其背后有着很是强大的技术团队给予技术支持。React带来了不少新的东西，例如组件化、JSX、虚拟DOM等。其提供的虚拟DOM使得咱们渲染组件呈现很是之快，让咱们从频繁操做DOM的繁重工做之中解脱。了解React的人都知道，它作的工做更多偏重于MVC中的V层，结合其它如Flux等一块儿，你能够很是容易构建强大的应用。程序员

　　React的官网，猛戳这里。github

　　二、组件化算法

　　React的世界里，一切都是组件。你能够构建任何直接的HTML没有的组件，例以下拉菜单、导航菜单等。同时，组件里也能够包含其它组件。每个组件都有一个render方法，用于呈现该组件。同时，每个组件都有属于本身的scope，从而与其它的组件界定开来，用于构建属于该组件的方法，以方便复用。浏览器

　　三、JSX服务器

　　若是你看过React的代码，你会很是容易发现JSX这个东东。很难一两句话解释清楚JSX是什么东西，但通俗的讲JSX是基于JS的扩展，它容许你在JS里直接写HTML的代码，而不用像咱们过去同样要想在JS里写HTML不得不拼接一大堆的字符串。例如：函数

1 var ExampleComponent = React.createClass({
2     render: function () {
3         return (
4             <div className="listMenu">
5                 Hello World!
6             </div>
7             );
8     }
9 });

　　仔细观察，你会发现这段JSX代码里竟然直接又<、>等这些在JS里是不容许如此直接写的代码。这就是JSX带来的好处，它容许你在JS里使用你很是熟悉的HTML的标签。另外，注意render里的className，由于class在JS里是保留字，因此这里用的是className，相似的还有label标签的for等状况。组件化

　　JSX给程序员带来了很是大的方便，从上面的代码你就能够有所窥见。可是，另一些是它打破了咱们一般熟悉的JS与HTML分离的想法，刚接触JSX的程序员会以为JSX这种写法很是别扭。React同时提供了非JSX的写法，如上面的程序用JS写：

1 var ExampleComponent = React.createClass({
2     render: function () {
3         return (
4             React.createElement('div', {className: 'listMenu'}, 'Hello World!')
5             );
6     }
7 });

　　这段代码里没有html的标签，可能你看起来会以为舒服些。可是，相信我，一旦你熟悉JSX，你会爱不释手！

　　四、虚拟DOM

　　React之因此很是快，就是由于它提供了虚拟DOM的概念。其根本原理是由于React不直接操做DOM，咱们都知道频繁的操做DOM会很是影响性能和体验。React将DOM结构储存在内存中，与render方法的返回值进行比较，经过其自由的diff算法计算出不一样的地方，而后反应到真实的DOM当中。也就是说，大多数状况咱们渲染组件、更改组件状态等都是操做的虚拟DOM，只有在有所改变的状况下，才会反应到真实的DOM当中。举个例子就是，比方说你构建了一辆汽车，你给汽车进行了些改装（从新换个发动机啥的），用React的话讲就是，当你应用这些改装的时候，React会运行一套独特的diff算法计算出哪些作了改装，而后去改装这些东西。

　　五、下载安装

　　不少人看到这里都会以为，你说的文字描述糊里糊涂，你写的代码又跑不起来。在这里须要提醒你们的是，JSX的代码是不能复制到控制台去执行的，在浏览器端运行JSX代码须要进行一下转换（正式开发环境下不建议在浏览器端转换，影响性能）。固然，这层转换也能够在服务器端进行，并且这也一般是咱们推荐的方法。在这里，为了方便介绍，咱们统一在浏览器端转换。

　　下载地址：猛戳这里，当前版本是0.13.3。

　　安装与使用，刚才咱们有提到在浏览器端转换JSX的代码，所以你须要引入两个文件，分别为react.js和JSXTransformer.js，而后上面写过的代码就能够工做了，就以上面的hello world代码为例：

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <script src="build/react.js"></script>
 5     <script src="build/JSXTransformer.js"></script>
 6   </head>
 7   <body>
 8     <div id="container"></div>
 9     <script type="text/jsx">
10       var ExampleComponent = React.createClass({
11         render: function () {
12             return (
13                 <div className="navigation">
14                     Hello World!
15                 </div>
16                 );
17         　　}
18     　　});
19 
20     　　React.render(<ExampleComponent />, document.getElementById("container"));
21     </script>
22   </body>
23 </html>

　　若是你喜欢用CDN，那么能够到这里去查看，猛戳这里。注意上面代码里body底部的script标签，咱们使用的type为“text/jsx”，这是告诉React这是JSX代码，碰到它JSXTransormer会对它进行一下转换。

　　另外须要注意的是上面第20行代码，React.render()方法，它将你构建的组件呈现到一个存在的DOM节点中。使用方法如上第20行，参数分别是你的组件和已存在的DOM节点。

　　六、初始呈现

　　当你须要将本身的组件呈现的时候，你须要调用React.render方法，该方法在上面已经介绍，在此再也不赘述。

　　七、组件基础

　　组件拥有state（状态）和props（属性）两个很是重要的概念，这使得咱们能够屡次的复用组件，由于你每次传递的都不同。

　　属性（props）：咱们能够像写HTML标签同样在呈现组件的时候传递一些属性，但同时咱们也不只限于HTML的可用属性。例如，上面的Hello world例子，咱们能够传递属性，以下：

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <script src="build/react.js"></script>
 5     <script src="build/JSXTransformer.js"></script>
 6   </head>
 7   <body>
 8     <div id="container"></div>
 9     <script type="text/jsx">
10       var ExampleComponent = React.createClass({
11         render: function () {
12             return (
13                 <div className={this.props.config}>
14                     Hello World,{this.props.name}!
15                 </div>
16                 );
17         }
18     });
19 
20     React.render(<ExampleComponent config="listMenu" name="ZhaoSi"/>, document.getElementById("container"));
21     </script>
22   </body>
23 </html>

　　如上，咱们在第20行呈现组件的时候，能够传递参数，例如咱们传递了name和config，这样咱们能够在组件的定义（第13-15行）内经过this.props.XX使用这两个属性。很是灵活！

　　状态（state）：上面咱们提到过，须要用state的话咱们必须提供一个初始的state，若是更改state，则须要调用this.setState()方法。其中初始state使用getInitialState()方法，它返回初始state对象。一样使用咱们的hello world例子，使用方法以下：

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <script src="build/react.js"></script>
 5     <script src="build/JSXTransformer.js"></script>
 6   </head>
 7   <body>
 8     <div id="container"></div>
 9     <script type="text/jsx">
10       var ExampleComponent = React.createClass({
11           getInitialState: function () {
12               return {
13                   name: "ZhaoSi"
14               };
15           },
16         render: function () {
17             return (
18                 <div className={this.props.config}>
19                     Hello World,{this.state.name}!
20                 </div>
21                 );
22         }
23     });
24 
25     React.render(<ExampleComponent config="listMenu"/>, document.getElementById("container"));
26     </script>
27   </body>
28 </html>

　　如上，咱们在第11行定义了初始状态的方法，即getInitialState，返回一个state对象，在组件的呈现render里咱们可使用this.state.XX来访问state对象里的属性。

　　注意：this.props.config和this.state.name必定要放置在花括号里。

　　八、组件的生命周期

　　每一个组件都有本身的生命周期，所以提供了一些列的方法，你能够定义在组件的定义里。它们都会在生命周期的不一样阶段被调用，一个明显的例子就是上面咱们提到的getInitialState()方法，它在组件被建立的时候调用一次。其它各个方法以下：

　　componentWillMount:该方法在你调用组件并呈现组件的时候调用，执行一次，所以咱们能够在这里发送一些http请求获取咱们想要的参数；

　　componentDidMount:该方法在你调用组件并呈现组件以后调用，执行一次；

　　shouldComponentUpdate: 根据该方法的返回值来决定是否须要从新渲染组件；

　　componentWillUnMount:在组件从页面DOM中取消呈现的时候调用。

　　九、组件的方法

　　React同时也提供了一些组件的方法，用于在组件的构造过程当中调用。

　　getDefaultProps:该方法使用与getInitialState同样，不一样的是它定义一些默认的props；

　　propTypes:定义了你能够传递的prop的类型，错误的传递React会报错，具体类型能够猛戳这里，说白了就是对你传递的prop进行一个类型校验；

　　mixins: 你也发现了React在构建组件的时候定义了不少函数，若是不少组件公用/复用相同的一些函数的话，你大可把它们都抽出来封装为ExampleMixins，而后经过mixins:[ExampleMixins]传递进去。

　　十、结束语

　　看到这里，但愿你可以了解到React的一些基本概念和使用方法，下一篇文章中咱们会继续探索一下React的更进一步的例子。若是本文还算有所帮助，欢迎不吝点赞；若是有错误之处，也欢迎留言指正！

　　本文的代码均可以在这里下载到，猛戳这里！

1. ReactJs入门思路小指南
2. Node.js 指南（入门指南）
3. ReactJS入门之ReactJS简介
4. Firebug入门指南
5. Git入门指南
6. pytorch 入门指南
7. Gulp入门指南
8. webpack 入门指南
9. Gulp4.0入门指南
10. MarkDown入门指南
更多相关文章...
• SQL 指南 - 网站建设指南
• HTML 指南 - 网站建设指南
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用