React开发入门

时间 2019-11-22

标签 react 开发入门栏目 React 繁體版

原文原文链接

目录：

1、前言

2、什么是React

3、开发环境搭建

4、预备知识

5、最简单的React小程序

6、基础语法介绍

7、总结

8、参考资料

1、前言

近段时间看到学长公司招聘React Native工程师，当时比较好奇，就搜索了一下，而后恰好须要每月买一本书看看，因此就买了一本《Reactive Native 开发指南》。

可是看到里面的预备知识的时候，发现首先最好须要先了解一下React（书中写道：咱们假设你对React已经有了一些了解），心想是否是还要买一本React的书籍，后来想一想干脆直接从网上搜搜教程吧，所以开始去探索，最终找到了三个连接的内容讲的React还不错，一个是阮一峰的博客，一个是官方文档，一个是 React概览。阮一峰的博客和React概览都是中文的，并且写的比较容易理解，而官方文档是英文的，讲解的都比较详细。因此若是本身英文好的话能够直接看官方文档。

2、什么是React

React是一个JavaScript库，是由FaceBook和Instagram开发的，主要用于用户建立图形化界面。

3、开发环境的搭建

作任何开发环境，我都会想着首先须要搭建一个环境来开发。就像若是开发iOS，你须要有苹果电脑，而后从AppStore下载Xcode，而后就能够熟悉一个Xcode，看看文档，就能够开始开发了；就像若是开发Android，你须要安装Android Studio，而后须要安装Java环境，而后就能够进行开发了。对于React，通过了解，我发现任何一个工具，好比Sublime Text，IntelliJ IDEA等等均可以，你甚至直接可使用文本编辑器等等。这里面我使用的是IntelliJ IDEA。

一、安装一个IntellJ IDEA就能够进行开发了。

二、一个浏览器（这里面我使用的是Chrome）

三、下载相关库（下载连接）

4、预备知识

这个博客主要是介绍的React，我也假设一下：你须要对HTML，CSS，JavaScript有必定的了解，由于代码大部分都是用这些来进行开发的。

5、最简单的React小程序

我学任何语言的时候第一个程序都是一个Hello,World!。如今就让咱们来利用React来写一个最简单的Hello,World!

直接上代码：

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Hello world!</title>
   <script src = "../../build/react.js"></script>
   <script src = "../../build/react-dom.js"></script>
   <script src = "../../build/browser.min.js"></script>
</head>
<body>
   <div id = "example"></div>
   <script type="text/babel">
      ReactDOM.render(
            <h1>Hello,World!</h1>,
            document.getElementById('example')
      );
   </script>
</body>
</html>

而后用浏览器打开就能够了（这里假设你已经会使用IntellJ IDEA，若是不会就先使用Sublime Text），而后在浏览器里面就能够看到你特别熟悉的Hello,World！了。

简单分析一下这个程序，首先，head里面引入了三个js文件。前两个是react的js文件，你能够在目录三里面的下载相关库里面拿。还有一个是browser.min.js，为何要引入这个js能够参考这个提问，实际上是为了将JSX语法转换成JavaScript语法。能够百度谷歌一下，下载该文件，也能够直接引用网上资源。而后就在html里面写了一个script代码块：

<script type="text/babel">
   ReactDOM.render(
         <h1>Hello,World!</h1>,
         document.getElementById('example')
   );
</script>

这里须要注意：首先，/h1>后面是此外，之前咱们可能使用的是type是text/javascript，如今咱们使用的text/babel。这是由于React独有的JSX语法，跟JavaScript不兼容，凡是使用JSX的地方，都要加上type = “text/babel”。

是否是已经开放蒙圈了，刚才提了好几个JSX，什么是JSX呢？React官方文档里面的解释是： XML语法内部包含JavaScript被叫作JSX。可是我理解的应该是咱们直接在JS里面嵌入了HTML，这个就是React提出的叫作JSX的语法吧。这样作的好处就是一个组件的开发过程当中，HTML是必不可少的一部分，可以将HTML封装起来才是组件的彻底体。JSX语法的产生，让前端实现组件化成为了可能。

JSX的基本语法规则：遇到HTML标签(以<开头)，就用HTML规则解析；遇到代码块(以{开头)，就用JavaScript规则解析。

在ReactDOM.render里面写了两行，他们的做用就是将h1标题插入example节点。

你也能够直接新建一个js文件，而后将body里script里面的代码直接放到里面，咱们能够命名为helloworld.js，而后在head里面导入便可。我比较倾向于这种作法，由于至少html文件不会看着太大，并且方便引入管理。若是其余html也须要改代码块，直接引入便可。

6、基础语法介绍

一、ReactDOM.render( )

ReactDOM.render是React最基本的语法，用于将模板转换成HTML语言，并插入指定的DOM节点。

ReactDOM.render(
    <h1>Hello,World!</h1>,
    document.getElementById('example')
);

运行结果以下：

二、map（遍历）

将数组中的元素遍历赋值

var animals = ['dog','cat','pig'];
ReactDOM.render(
    <div>
        {
            animals.map(function(animal) {
              return <h1>{animal}</h1>
            })
        }
    </div>,
    document.getElementById('example')
);

从这里开始都是讲React代码放到了.js文件里面，而后在html文件里面引入。引入的时候记得写type = ’text/babel’。这里会有一个小问题：打开浏览器的调试工具后，里面会看到Warning以下：

Warning: Each child in an array or iterator should have a unique "key" prop. Check the top-level render call using <div>

解决方法以下：

var animals = ['dog','cat','pig'];
ReactDOM.render(
    <div>
        {
            animals.map(function(animal,key) {
              return <h1 key = {key}>{animal}</h1>
            })
        }
    </div>,
    document.getElementById('example')
);

警告的意思是最好给循环产生的child添加一个key。这样就能够接触警告了。运行结果以下：

这里面你也许还会遇到另一个问题，那就是用的Sublime Text，而后太浏览器打开的时候提示：

browser.min.js:3 XMLHttpRequest cannot load file:///Users/**/***/React/MyReactDemo/helloworld/src/helloworld.js.
 Cross origin requests are only supported for protocol schemes: 
http, data, chrome, chrome-extension, https, chrome-extension-resource.

实际上是由于咱们将js单独拉出来文件致使的，可是你会发现若是使用Safari浏览器是没有这个问题的。在这里找到了答案：

startup chrome with --disable-web-security
On Windows:

chrome.exe --disable-web-security

On Mac:

open /Applications/Google\ Chrome.app/ --args --disable-web-security

由于Chrome浏览器不支持本地ajax访问。

你也能够构建本地服务器进行访问，好比我使用的intellJ IDEA ，直接就是在本地构建了一个本地服务，此时访问地址为：

http://localhost:63342/MyReactDemo/helloworld/src/helloworld.html

而没有构建本地服务的时候访问地址为：

file:///Users/zhanggui/zhanggui/React/MyReactDemo/helloworld/src/helloworld.html

三、组件化javascript

由于React使用的是JSX，因此它容许将代码封装成组件（component），而后像普通的HTML标签同样插入。

React.createClass方法就是用于生成一个组件类，好比：
var ZGButton = React.createClass({
    render:function() {
        return <button>ZG{this.props.name}</button>
    }
});
ReactDOM.render(
    <ZGButton name = 'Button1'/>,
    document.getElementById('example')
);

运行结果以下：

上面的ZGButton就是一个组件类，模板插入<ZGButton />，会自动生成一个该组件的实例。

全部组件类都必须有本身的render方法，用于输出组件。

如今代码这样写：

var zGButton = React.createClass({
    render:function() {
        return <button>ZG{this.props.name}</button>
    }
});
ReactDOM.render(
    <zGButton name="Button2">Button</zGButton>,
    document.getElementById('example')
);

也就是将组件类的第一个字符小写，而后在引用的时候发现如今是双标签了（代码自动填充的时候出现），并且name失效。所以咱们在开发组件的时候必定要将第一个首字符大写，不然将不会达到你想要的效果。

四、this.props.children

this.props对象的属性和组件的属性一一对应，可是有个children除外，它表示的是组件的全部子节点：

var Students = React.createClass({
    render:function() {
        return (
            <ol>
                {
                    React.Children.map(this.props.children,function(child) {
                        return <li>{child}</li>
                    })
                }
            </ol>
        );
    }
});
ReactDOM.render(
    <Students>
        <span>zhangsan</span>
        <span>lisi</span>
    </Students>,
    document.getElementById('example')
);

此时输出的结果为：

五、PropTypes

组件就相似与咱们OC开发或者Java开发中的类，类能够进行属性添加，组件也能够。

组件的属性能够接受任意值，字符串、对象、函数都行。这里面有一个propTypes，能够用来限定提供的属性是否知足要求：

var Student = React.createClass({
    propTypes: {
      myName:React.PropTypes.string.isRequired,
    },
    render:function() {
        return <h1>
            {this.props.myName}
        </h1>
    }
});
var myNameStr = "React";
ReactDOM.render(
    <Student myName = {myNameStr} />,
    document.getElementById('example')
);

这里面的propTypes里面的是对属性的限制，好比这里必须是string类型，值是必须的。咱们还能够去设置默认属性值：

var Student = React.createClass({
    getDefaultProps: function() {
        return {
            myName:"Default React"
        }
    },

    propTypes: {
      myName:React.PropTypes.string.isRequired,
    },
    render:function() {
        return <h1>
            {this.props.myName}
        </h1>
    }
});

这里面的getDefaultProps就相似与咱们在开发iOS或者Java的时候对声明属性的时候进行赋初始化值。

六、Virtual DOM

组件并非真实的DOM节点，而是存在于内存中的一种数据结构，叫作虚拟DOM，只有插入文档的时候才会变成真实的DOM。根据React的设计，当从新渲染组件的时候，会通多diff寻找到变动的DOM节点，再把这个修改更新到浏览器实际的DOM节点上，因此实际上并非渲染整个DOM数，这个Virtual DOM是一个纯粹的JS数据结构，性能比原生DOM快不少。这里面咱们能够用经过ref属性来获取真实的DOM属性：

var MyComponment = React.createClass({
    render:function(){
        return (
          <div>
              <input type = "text" ref = "myTextInput"/>
              <input type = "button" value = "Focus the text input" onClick={this.handleClick}/>
          </div>
        );
    },
    handleClick:function() {
        // alert(this.refs.myTextInput);
        this.refs.myTextInput.focus();
    }
});
ReactDOM.render(
    <MyComponment/>,
    document.getElementById('example')
);

这里须要注意的是，由于咱们使用的是真实的DOM对象，因此必定要确保DOM插入文档以后才可以使用。

七、this.state

咱们能够经过this.state来拿到组件的状态：

var LinkButton = React.createClass({
    getInitialState:function () {
      return {linked:false};
    },
    handleClick:function() {
        this.setState({linked:!this.state.linked});
    },
    render:function() {
        var text = this.state.linked? 'linked':'not linked';
        return (
            <p onClick={this.handleClick}>
                You {text} this. Click to toggle
            </p>
        );
    }
});
ReactDOM.render(
    <LinkButton/>,
    document.getElementById('example')
);

这里面我设置了一个linked的状态（是否链接）,这里经过this.state拿到当前状态，经过this.setState来设置状态。

八、表单

表单填写是用户和组件的互动：

var Form = React.createClass({
    getInitialState:function() {
        return {value:'Hello'};
       
    },
    handleChange:function(event) {
        this.setState({value:event.target.value});
    },
    render:function() {
        var value = this.state.value;
        return (
            <div>
                <input type="text" value = {value} onChange={this.handleChange}/>
                <p>{value}</p>
            </div>

        );
    }
});
ReactDOM.render(
    <Form/>,
    document.getElementById('example')
);

九、Component Lifecycle

组件有三个主要的生命周期：

Mounting:组件插入到DOM

Updating:组件被从新渲染，若是DOM须要更新

Unmounting:从DOM中删除组件

React为每一个状态都提供了两种处理函数，will函数在进入状态以前调用，did在进入状态以后调用。详情可参见这里。

var MyButton = React.createClass({

    componentDidMount:function() {
        alert("已经装载");
    },
    componentWillMount:function() {
        alert("将要装载");
    },
    componentWillUpdate:function() {
        alert("将要更新");
    },
    componentDidUpdate:function() {
        alert("已经更新");
    },
    componentWillUnmount:function() {
        alert("将要移除");
    },
    render:function(){
        return (
            <button>MyButton</button>
        );
    },
});
var LoadButton = React.createClass({
    loadMyButton:function() {
      ReactDOM.render(
          <MyButton/>,
          document.getElementById('myBTN')
      );
    },
    removeMyButton:function() {
        var result = ReactDOM.unmountComponentAtNode(document.getElementById('myBTN'));
        console.log(result);
    },
    render:function() {
        return (
            <div>
                <button onClick={this.removeMyButton}>卸载MyButton</button>
                <button onClick={this.loadMyButton}>装载MyButton</button>
                <div id="myBTN">这里是mybuttonquyu</div>
            </div>


        );
    }
});
ReactDOM.render(
    <LoadButton/>,
    document.getElementById('example')
);

十、Ajax

组件的数据一般是经过Ajax请求服务器获取的，可使用componentDidMount方法来设置Ajax请求，等到请求成功，再用this.setState方法从新渲染UI:

var UserGist = React.createClass({
    getInitialState:function() {
        return {
            username:'',
            lastGistUrl:''
        }
    },
    componentDidMount:function(){
        $.get(this.props.source,function(result){
            var lastGist  = result[0];
            if (this.isMounted()) {
                this.setState({
                        username:lastGist.owner.login,
                        lastGistUrl:lastGist.html_url
                }
                );
            }
        }.bind(this));
    },
    render:function() {
        return (
            <div>

                    {this.state.username}'s last gist is
                    <a href={this.state.lastGistUrl}>here</a>

            </div>
        );
    }
});
ReactDOM.render(
    <UserGist source = "https://api.github.com/users/octocat/gists"/>,
    document.getElementById('example')
);

这里使用了$,因此要引入jquery.js。

7、总结

通过这两天的了解，大概对React入门了。我的以为React就是为了组件化开发方便而产生的。利用React，可让其充当MVC中V的角色。也是对MVC架构的辅助设计。

8、参考资料

　　一、阮一峰的博客

　　二、 React官方文档

　　三、 React入门教程