您的位置:9159金沙官网 > 9159金沙官网 > React 简单介绍

React 简单介绍

发布时间:2019-11-14 18:07编辑:9159金沙官网浏览(176)

    why React?

    React是推特(TWTR.US)开荒的生龙活虎款JS库,那么脸书为啥要修建React呢,首要为了缓解什么难题,通过这么些又是何等消除的?

    从那多少个难点出发作者就在网络搜查了须臾间,有诸如此比的解说。

    推特以为MVC不可能满足她们的恢宏须要,由于她们那么些了不起的代码库和一点都不小的团体,使得MVC比极快变得老大复复杂,每当必要加多生龙活虎项新的成效或特色时,系统的复杂度就成级数增进,招致代码变得虚弱和不得预测,结果导致他们的MVC正在瓦解。感到MVC不契合大范围利用,当系统中有好些个的模型和相应的视图时,其复杂度就能够飞速强盛,极其难以驾驭和调节和测量检验,极其是模型和视图间只怕存在的双向数据流动。

    消除那些标题亟待“以某种格局组织代码,使其越发可预测”,这通过她们(Instagram)建议的Flux和React已经实现。

    Flux是四个体系架构,用于推进应用中的数据单向流动。React是二个JavaScript框架,用于创设“可预料的”和“评释式的”Web顾客分界面,它早就使推特(Twitter)越来越快地开荒Web应用

    对此Flux,方今还未有怎么琢磨,不怎么懂,这里就先把Flux的图放上来,有意思味大概打听的能够再享受下,这里根本说下React。

    Flux

    那么React是解决什么难点的,在官方网站可以找到这么一句话:

    We built React to solve one problem: building large applications with data that changes over time.

    创设那么些数据会随即间修改的巨型应用,做这几个,React有三个注重的风味:

    1. 简单
      简单易行的发挥大肆时间点你的行使应该是怎样体统的,React将会自动的管理UI界面更新当数码产生变化的时候。
    2. React 简单介绍。声明式
      React 简单介绍。在数据产生变化的时候,React从概念上讲与点击了F5同样,实际上它仅仅是翻新了变动的风姿洒脱有个别而已。
      React 简单介绍。React是关于组织可选用组件的,实际上,使用React你做的单独是营造建立。通过包装,使得组件代码复用、测量试验以致关怀点分离尤其便于。

    另外在React官网上,通过《Why did we build React?React 简单介绍。》为啥我们要建造React的文书档案中还足以精晓到以下四点:

    • React不是二个MVC框架
    • React不利用模板
    • React 简单介绍。响应式更新特别简单
    • HTML5仅仅是个开始

    具体也能够看自个儿后面黄金时代篇作品《缘何大家要造React?》。

    React重要的法规

    Virtual DOM 虚拟DOM
    价值观的web应用,操作DOM平时是直接更新操作的,然则大家明白DOM更新平时是相比较值钱的。而React为了尽大概裁减对DOM的操作,提供了风流倜傥种分歧的而又有力的情势来更新DOM,取代直接的DOM操作。正是Virtual DOM,一个轻量级的虚构的DOM,就是React抽象出来的一个目的,描述dom应该怎么着样子的,应该怎么样展现。通过那一个Virtual DOM去立异真实的DOM,由这几个Virtual DOM管理实际DOM的更新。

    为啥通过那多生机勃勃层的Virtual DOM操作就能够更快啊? 那是因为React有个diff算法,更新Virtual DOM并不保证及时影响真实的DOM,React会等到事件循环甘休,然后使用那个diff算法,通过当前新的dom表述与前边的作相比,总结出最小的步骤更新真实的DOM。

    virtual DOM

    Components 组件
    在DOM树上的节点被称得上成分,在此则分化,Virtual DOM上称之为commponent。Virtual DOM的节点就是三个完全抽象的机件,它是由commponents组成。

    component 的施用在 React 里极为主要, 因为 components 的存在让总括 DOM diff 更便捷。

    State 和 Render
    React是什么样表现真实的DOM,怎么着渲染组件,何时渲染,怎么同步更新的,那就需求轻巧精晓下State和Render了。state属性富含定义组件所供给的生机勃勃对数量,当数码发生变化时,将会调用Render再次出现渲染,这里一定要通过提供的setState方法立异数据。

    好了,说了那样多,下边看写代码吧,先看一个官网络提供的Hello World的示例:

    <!DOCTYPE html>
    <html>
      <head>
        <script src="http://fb.me/react-0.12.1.js"></script>
        <script src="http://fb.me/JSXTransformer-0.12.1.js"></script>
      </head>
      <body>
        <div id="example"></div>
        <script type="text/jsx">
          React.render(
            <h1>Hello, world!</h1>,
            document.getElementById('example')
          );
        </script>
      </body>
    </html>
    

    本条很简短,浏览器访谈,能够看到Hello, world!字样。JSXTransformer.js是支撑拆解剖判JSX语法的,JSX是能够在Javascript中写html代码的豆蔻梢头种语法。假若不爱好,React也提供原生Javascript的点子。

    再来看下其余二个事例:

    <html>
        <head>
            <title>Hello React</title>
            <script src="http://fb.me/react-0.12.1.js"></script>
            <script src="http://fb.me/JSXTransformer-0.12.1.js"></script>
            <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
            <script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
            <style>
            #content{
                width: 800px;
                margin: 0 auto;
                padding: 5px 10px;
                background-color:#eee;
            }
            .commentBox h1{
                background-color: #bbb;
            }
            .commentList{
                border: 1px solid yellow;
                padding:10px;
            }
            .commentList .comment{
                border: 1px solid #bbb;
                padding-left: 10px;
                margin-bottom:10px;
            }
            .commentList .commentAuthor{
                font-size: 20px;
            }
            .commentForm{
                margin-top: 20px;
                border: 1px solid red;
                padding:10px;
            }
            .commentForm textarea{
                width:100%;
                height:50px;
                margin:10px 0 10px 2px;
            }
            </style>
        </head>
        <body>
            <div id="content"></div>
            <script type="text/jsx">
            var staticData = [
                {author: "张飞", text: "我在写一条评论~!"},
                {author: "关羽", text: "2货,都知道你在写的是一条评论。。"},
                {author: "刘备", text: "哎,咋跟这俩逗逼结拜了!"}
            ];
    
            var converter = new Showdown.converter();//markdown
    
            /** 组件结构:
                <CommentBox>
                    <CommentList>
                        <Comment />
                    </CommentList>
                    <CommentForm />
                </CommentBox>
            */
            //评论内容组件
            var Comment = React.createClass({
                render: function (){
                    var rawMarkup = converter.makeHtml(this.props.children.toString());
                    return (
                        <div className="comment">
                            <h2 className="commentAuthor">
                                {this.props.author}:
                            </h2>
    
                        </div>
                    );
                }
            });
            //评论列表组件
            var CommentList = React.createClass({
                render: function (){
                    var commentNodes = this.props.data.map(function (comment){
                        return (
                            <Comment author={comment.author}>
                                {comment.text}
                            </Comment>
                        );
                    });
    
                    return (
                        <div className="commentList">
                            {commentNodes}
                        </div>
                    );
                }
            });
    
            //评论表单组件
            var CommentForm = React.createClass({
                handleSubmit: function (e){
                    e.preventDefault();
                    var author = this.refs.author.getDOMNode().value.trim();
                    var text = this.refs.text.getDOMNode().value.trim();
                    if(!author || !text){
                        return;
                    }
                    this.props.onCommentSubmit({author: author, text: text});
                    this.refs.author.getDOMNode().value = '';
                    this.refs.text.getDOMNode().value = '';
                    return;
                },
                render: function (){
                    return (
                        <form className="commentForm" onSubmit={this.handleSubmit}>
                            <input type="text" placeholder="Your name" ref="author" /><br/>
                            <textarea type="text" placeholder="Say something..." ref="text" ></textarea><br/>
                            <input type="submit" value="Post" />
                        </form>
                    );
                }
            });
    
            //评论块组件
            var CommentBox = React.createClass({
                loadCommentsFromServer: function (){
                    this.setState({data: staticData});
                    /*
                    方便起见,这里就不走服务端了,可以自己尝试
                    $.ajax({
                        url: this.props.url + "?_t=" + new Date().valueOf(),
                        dataType: 'json',
                        success: function (data){
                            this.setState({data: data});
                        }.bind(this),
                        error: function (xhr, status, err){
                            console.error(this.props.url, status, err.toString());
                        }.bind(this)
                    });
                    */
                },
                handleCommentSubmit: function (comment){
                    //TODO: submit to the server and refresh the list
                    var comments = this.state.data;
                    var newComments = comments.concat([comment]);
    
                    //这里也不向后端提交了
                    staticData = newComments;
    
                    this.setState({data: newComments});
                },
                //初始化 相当于构造函数
                getInitialState: function (){
                    return {data: []};
                },
                //组件添加的时候运行
                componentDidMount: function (){
                    this.loadCommentsFromServer();
                    this.interval = setInterval(this.loadCommentsFromServer, this.props.pollInterval);
                },
                //组件删除的时候运行
                componentWillUnmount: function() {
                    clearInterval(this.interval);
                },
                //调用setState或者父级组件重新渲染不同的props时才会重新调用
                render: function (){
                    return (
                        <div className="commentBox">
                            <h1>Comments</h1>
                            <CommentList data={this.state.data}/>
                            <CommentForm onCommentSubmit={this.handleCommentSubmit} />
                        </div>
                    );
                }
            });
    
            //当前目录需要有comments.json文件
            //这里定义属性,如url、pollInterval,包含在props属性中
            React.render(
                <CommentBox url="comments.json" pollInterval="2000" />,
                document.getElementById("content")
            );
            </script>
        </body>
    </html>
    

    乍意气风发看挺多,主要看脚本有的就可以了。方便起见,这里都并未有走后端。定义了八个大局的变量staticData,可权当是走服务端,通过浏览器的调整台改良staticData的值,查看下效果,提交一条议论,查看下staticData的值的变动。

    选择景况

    域外使用的非常多,facebook、Yahoo、Reddit等。在github能够观察一个列表Sites-Using-React,国内的话,查了查,貌似少之甚少,这段时间领悟的有三个瓜亚基尔大搜车。非常多技艺要在国内接受起来平日是很慢的,可是React确实感到到比较非常,特别是UI的组件化和Virtual DOM的思想,笔者个人相比较看好,风乐趣继续商量研商。

    正如深入分析

    和任何部分js框架相比较,React怎么样,举个例子Backbone、Angular等。

    • React不是一个MVC框架,它是营造易于可再一次调用的web组件,侧重于UI, 也正是view层
    • 其次React是单向的从数量到视图的渲染,非双向数据绑定
    • 不直接操作DOM对象,而是经过编造DOM通过diff算法以细小的步子功效到实在的DOM上。
    • 不低价直接操作DOM,大非常多日子只是对 virtual DOM 进行编制程序

    好了,就那么些了,查看了超多质地,东挪西凑出来,权当收拾吧,当然,收拾的也大概很烂,哈哈
    将就吧~~

    参照他事他说加以考察资料

    1. React 官网
    2. React github
    3. React汉语社区
    4. 推特:MVC不适合广大使用,改用Flux
    5. Why did we build React?
    6. Instagram 的 React 框架深入深入分析
    7. 关于从 Backbone 转向 React 的思考
    8. React 的 diff 算法

    ===== 更新扩张加与2017-09-30
    随笔是很早以前刚接触React时写的了,想要沟通的能够今日头条私信 http://weibo.com/rkcoder

    本文由9159金沙官网发布于9159金沙官网,转载请注明出处:React 简单介绍

    关键词: