zoukankan      html  css  js  c++  java
  • React开发

    目录:
    一、前言
    二、什么是React
    三、开发环境搭建
    四、预备知识
    五、最简单的React小程序
    六、基础语法介绍
    七、总结
    八、参考资料
     
    一、前言
    近段时间看到学长公司招聘React Native工程师,当时比较好奇,就搜索了一下,然后刚好需要每个月买一本书看看,所以就买了一本《Reactive Native 开发指南》。
    但是看到里面的预备知识的时候,发现首先最好需要先了解一下React(书中写道:我们假设你对React已经有了一些了解),心想是不是还要买一本React的书籍,后来想想干脆直接从网上搜搜教程吧,因此开始去探索,最终找到了三个链接的内容讲的React还不错,一个是阮一峰的博客,一个是官方文档,一个是React概览。阮一峰的博客和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架构的辅助设计。
    八、参考资料
  • 相关阅读:
    HDU2027 统计元音 一点点哈希思想
    湖南工业大学第一届ACM竞赛 数字游戏 字符串处理
    湖南工业大学第一届ACM竞赛 我素故我在 DFS
    HDU3293sort
    HDU2082 找单词 母函数
    HDU1018 Big Number 斯特林公式
    湖南工业大学第一届ACM竞赛 分糖果 位操作
    UVA 357 Let Me Count The Ways
    UVA 147 Dollars
    UVA 348 Optimal Array Multiplication Sequence
  • 原文地址:https://www.cnblogs.com/MagicalOfD/p/6603597.html
Copyright © 2011-2022 走看看