React的开发基础入门

Posted zz191308

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React的开发基础入门相关的知识,希望对你有一定的参考价值。

什么是React
React是一个javascript库,是由FaceBook和Instagram开发的,主要用于用户创建图形化界面。
 
开发环境的搭建
做任何开发环境,我都会想着首先需要搭建一个环境来开发。就像如果开发ios,你需要有苹果电脑,然后从AppStore下载Xcode,然后就可以熟悉一个Xcode,看看文档,就可以开始开发了;就像如果开发android,你需要安装Android Studio,然后需要安装Java环境,然后就可以进行开发了。对于React,经过了解,我发现任何一个工具,比如Sublime Text,IntelliJ IDEA等等都可以,你甚至直接可以使用文本编辑器等等。这里面我使用的是IntelliJ IDEA。
          1、安装一个IntellJ IDEA就可以进行开发了。
          2、一个浏览器(这里面我使用的是Chrome)
          3、下载相关库(下载链接
 
预备知识
这个博客主要是介绍的React,我也假设一下:你需要对html,CSS,JavaScript有一定的了解,因为代码大部分都是用这些来进行开发的。
 
最简单的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也需要改代码块,直接引入即可。  
 
基础语法介绍
1、ReactDOM.render( )
ReactDOM.render是React最基本的语法,用于将模板转换成HTML语言,并插入指定的DOM节点。
ReactDOM.render(
    <h1>Hello,World!</h1>,
    document.getElementById(‘example‘)
);
运行结果如下:
技术图片
2、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

3、组件化

因为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失效。因此我们在开发组件的时候一定要将第一个首字符大写,否则将不会达到你想要的效果。
4、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‘)
);
技术图片
此时输出的结果为:
技术图片
5、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的时候对声明属性的时候进行赋初始化值。
6、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插入文档之后才能够使用。
7、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来设置状态。
8、表单
表单填写是用户和组件的互动:
 
技术图片
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‘)
);
技术图片
9、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‘)
);
技术图片
10、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。
 
总结
     经过这两天的了解,大概对React入门了。个人觉得React就是为了组件化开发方便而产生的。利用React,可以让其充当MVC中V的角色。也是对MVC架构的辅助设计。

以上是关于React的开发基础入门的主要内容,如果未能解决你的问题,请参考以下文章

React的开发基础入门

快速体验React开发基础入门指南

React16.4 开发简书项目 从零基础入门到实战

低价好课:React.js入门基础与案例开发百度云高清完整

推荐net开发cad入门阅读代码片段

React-Native 基础学习入门指南