React半科普文

什么是React

以下是官方定义，反正我是没看懂。google了下，大家都称之“前端UI开发框架”，勉强这么叫着吧。可以看下这篇文章对react的介绍，本文更多的是覆盖react的入门实践。

A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

本文提到的例子可以在这里找到：github链接

getting started

getting-started.html里的例子比较简单，首先引入 react.js、JSXTransformer.js，然后通过 React.render() 方法即可。语法细节什么的可以先不管。

需要注意的点是，最后一段script标签，上面声明了 type="text/jsx"，也就是说并不是通常的直接解析执行的脚本，JSXTransformer.js 会对其进行预编译后再执行。

<!DOCTYPE html>
<html>
<head>
    <title>getting started</title>
    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
</head>
<body>

    <div id="example"></div>
    <script type="text/jsx">
      React.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
</body>
</html>

 

好了，看下效果吧。

文件分离

根据以往养成的好习惯，直觉的感觉到，这里应该将组件的定义跟 html 页面分离，不然以后页面肯定就乱糟糟了。示例请查看 separate-file.html

修改后的html文件，瞬间清爽很多。同样需要注意 type="text/jsx"

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
</head>
<body>

    <div id="example"></div>

    <script type="text/jsx" src="js/helloworld.js"></script>
</body>
</html>

 

处理后的 helloworld.js，其实内容一点变化都没有

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

 

好了，查看效果。双击 separate-file.html，这时看到页面是空白的，同时控制台还有错误信息。

肿么办呢？相信有经验的兄弟知道咋整了。这里偷个懒，直接用fis起个本地服务器。在2015.04.09-react/ 根路径下运行

fis server start
fis release

 

然后访问 http://127.0.0.1:8080/separate-file.html。well done

Server端编译

之前提到，JSXTransformer.js 会对标志 type="text/jsx" 的script 进行预编译后再执行，那么在浏览器端很可能就会遇到性能问题（没验证过）。React 的开发团队当然也考虑到这个问题了，于是也提供了server端的编译工具。

请查看 server-build-without-transform.html 。这里我们已经把 JSXTransformer.js 的依赖去掉。相对应的，我们需要在server端做一定的编译工作。

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <script src="build/react.js"></script>
    <!-- <script src="build/JSXTransformer.js"></script> -->
</head>
<body>

    <div id="example"></div>

    <script src="js-build/helloworld.js"></script>
</body>
</html>

 

挺简单的，安装 react-tools，然后运行相应命令即可

npm install -g react-tools

jsx --watch js/ js-build/

可以看到，js/helloworld.js 已经被编译成 js-build/helloworld.js。我们看下编译后的文件 

编译后的文件。可以看到，都是浏览器可以理解的语法。你也可以一开始就这样编写，不过保证你会抓狂。

React.render(
  React.createElement("h1", null, "Hello, world!"),
  document.getElementById('example')
);

 

定义一个组件

下面定义一个极简的组件 来做说明，示例代码可以查看 define-a-component.html。从代码可以看到：

  1. 通过 React.createClass() 来定义一个组件，该方法需要定义 render 方法来返回组件对应的 dom 结构
  2. 通过 React.render() 来调用组件。该方法传入两个参数，分别是 对应的组件，父级节点。

<!DOCTYPE html>
<html>
<head>
    <title>getting started</title>
    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
</head>
<body>

    <div id="example"></div>
    <script type="text/jsx">
      var HelloComponent = React.createClass({
            render: function(){
                return (
                    <div>
                        <h1>Hello World</h1>
                        <p>I am Hello World Component</p>
                    </div>
                );
            }
        });

      React.render(
        <HelloComponent />,
        document.getElementById('example')
      );
    </script>
</body>
</html>

 

示例效果如下： 

刚接触React组件定义的同学，可能会踩中下面的坑。比如把前面的组件定义改成。区别在于去掉了组件最外层的包裹节点 <div>

      var HelloComponent = React.createClass({
            render: function(){
                return (
                        <h1>Hello World</h1>
                        <p>I am Hello World Component</p>
                );
            }
        });

 

再次访问 http://127.0.0.1:8080/define-a-component.html 会有如下错误提示。错误信息比较明确了，不再赘述，乖乖加上包裹节点就好了

使用property

在定义一个组件时，我们通常会暴露一定的配置项，提高组件的可复用性。这里简单示范下如何实现，具体代码可查看 using-properties.html。

关键代码如下，还是比较直观的。使用组件时，就跟使用浏览器内置的组件那样给属性赋值。在组件定义的内部代码实现中，通过 this.props.xx 来取到对应的值即可。

    <script type="text/jsx">    

        var HelloComponent = React.createClass({
            render: function(){
                return (
                    <div>
                        <h1>Title is: {this.props.title}</h1>
                        <p>Content is: {this.props.content}</p>
                    </div>
                );
            }
        });

        React.render(
            <HelloComponent title="hello" content="world" />,
            document.getElementById('example')
        );

    </script>

 

组件嵌套

推荐看下 Thinking in React 这篇文章。要实现文中提到的 搭积木式的开发模式，组件的嵌套使用是必不可少的。下面示范下，具体代码查看 compose-components.html。

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
</head>
<body>

    <div id="example"></div>

    <script type="text/jsx">

        var Title = React.createClass({
            render: function(){
                return (
                    <h1>This is Title</h1>
                );
            }
        });

        var Content = React.createClass({
            render: function(){
                return (
                    <p>This is Content</p>
                );
            }
        });

        // Article组件包含了 Title、Content 组件
        var Article = React.createClass({
            render: function() {
                return (
                    <div class="article">
                        <Title />
                        <Content />
                    </div>
                );
            }
        });

        React.render(
          <Article />,
          document.getElementById('example')
        );
    </script>
</body>
</html>

 

组件更新

在React的体系中，组件的UI会随着组件状态的变化(state)进行更新。从围观的代码层面来说，是 setState() 方法被调用时，组件的UI会刷新。简单例子可以参考 update-if-state-chagne.html。例子可能不是很恰当，就表达那么个意思。

其中有两个方法简单介绍下：

  1. getInitialState：返回组件的初始状态。
  2. componentDidMount：当组件渲染完成后调用的方法。

ps：React的组件更新机制是最大的亮点之一。看似全量刷新，实际内部是基于Virtual DOM机制的局部刷新，开发者无需再编写大量的重复代码来更新局部的dom节点。

Virtual DOM以及局部刷新实现机制，这里就不展开了，可参考 http://calendar.perfplanet.com/2013/diff/

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
</head>
<body>

    <div id="example"></div>
    <script type="text/jsx">        

        var HelloComponent = React.createClass({
            getInitialState: function(){
                return {
                    title: 'title1',
                    content: 'content1'
                };
            },
            componentDidMount: function(){
                var that = this;
                setTimeout(function(){
                    that.setState({
                        title:'title2',
                        content:'content2'
                    });
                }, 2000);
            },
            render: function(){
                return (
                    <div>
                        <h1>Title is: {this.state.title}</h1>
                        <p>Content is: {this.state.content}</p>
                    </div>
                );
            }
        });

        React.render(
            <HelloComponent />,
            document.getElementById('example')
        );

    </script>
</body>
</html>

 

访问 http://127.0.0.1:8080/update-if-state-chage.html ，刚打开时，展示如下

 

2000ms后，界面刷新。

Virtual DOM

已经有人写过了，这里直接附上参考链接：http://calendar.perfplanet.com/2013/diff/

react native

TODO 待填坑

时间： 2024-08-31 03:42:08

React半科普文的相关文章

科普文：从大数据到Hadoop，Spark，Storm

大数据,官方定义是指那些数据量特别大.数据类别特别复杂的数据集,这种数据集无法用传统的数据库进行存储,管理和处理.大数据的主要特点为数据量大(Volume),数据类别复杂(Variety),数据处理速度快(Velocity)和数据真实性高(Veracity),合起来被称为4V. 大数据中的数据量非常巨大,达到了PB级别.而且这庞大的数据之中,不仅仅包括结构化数据(如数字.符号等数据),还包括非结构化数据(如文本.图像.声音.视频等数据).这使得大数据的存储,管理和处理很难利用传统的关系型数据库去

Hadoop科普文——常见的45个问题解答

在工作生活中,有些问题非常简单,但往往搜索半天也找不到所需的答案,在Hadoop的学习与使用过程中同样如此.这里为大家分享Hadoop集群设置中经常出现的一些问题,以下为译文: 1.Hadoop集群可以运行的3个模式? 单机(本地)模式 伪分布式模式 全分布式模式 2.  单机(本地)模式中的注意点? 在单机模式(standalone)中不会存在守护进程,所有东西都运行在一个JVM上.这里同样没有DFS,使用的是本地文件系统.单机模式适用于开发过程中运行MapReduce程序,这也是最少使用的一

TwitterCEO称推文每两天半就达10亿条

网易科技讯 11月27日消息,据科技博客TechCrunch报道,Twitter CEO迪克·科斯特罗(Dick Costolo)再次承诺,Twitter用户将能够在年底之前下载其推文的整个归档文件.他还透露,如今每 两天半推文发送量就达到10亿条.科斯特罗是在其母校密歇根大学在福特公共政策学院和信息学院主办的一个论坛上回应观众问题时作出上述声明的,他在论坛上讨论了Twitter在全球通讯和信息获取大众化未来中的角色.事实上,这并不是科斯特罗第一次作出该承诺.经媒体证实,他在9月参加美国网络新闻

【科普】搜索引擎的工作原理

昨天的文章 全球化的误区,本地化的机会 ,评论里,有人说,搜索引擎技术似乎不需要本地化,这一看就是彻底不懂这个领域的人讲的.当然,实话说,如果有人说,google在中文本地化方面做得非常好,我是可以部分同意的,同意的比例可能会比google工程师少一些.但我相信google工程师也会告诉你,搜索引擎是需要本地化的. 今天写篇科普文,讲讲搜索引擎的技术机理和市场竞争的一些特点.当然,作为从事或有兴趣从事流量运营的朋友,是可以用另一个角度去理解本文. 搜索引擎的核心技术架构,大体包括以下三块,第一,

【区块链之菜鸟入门】来来来，这篇科普告诉你“区块链”到底是个啥？

通过前面的两篇文章相信大家已经对区块链技术有了一个大致的了解,对于区块链的技术发展史也有所涉猎.但是貌似还不是很明白,毕竟貌似区块链技术里还有很多的术语,对于这些术语,宝宝心里苦,但宝宝还要继续学习呀(哭笑脸).不过呢,今天为大家分享的这篇文章偏科普性质,不需要大家对技术和金融有任何背景,会尽量回避一切技术术语,希望这篇文章能解决大家心里的一些疑惑所帮助.就算是小白的我也能读懂这篇关于区块链的文章呢,那你还在等什么?有了这篇文章,再约妹子吃饭,聊一聊区块链,瞬间逼格提升好几倍有木有?你还在等什么

用文凭上最高荣誉毕业的标签安抚了已经年过半百的老妈

今天是22岁的最后一天.几个月前,我从沃顿商学院毕业,用文凭上"最高荣誉毕业"的标签安抚了已经年过半百的老妈,然后转头辞去了毕业后的第一份工作,跟一家很受尊敬的公司.还有150万的年薪道了别,回到了上海,加入了"刚毕业就失业"俱乐部,开始了一天三顿盒饭的新生活.中间许多精彩剧情暂时略过. 我肯定不是第一个做过这样事的人,也肯定不会是最后一个.所以在说自己的一些有趣故事前,我想借用大家(包括30岁甚至40岁以上的朋友)的一点时间和一点平和的心态,和大家分享过去一年以来

哪种字体最适合快速阅读？（附搭配建议）

  什么样的字体兼具易认性和可读性?中英字体该如何搭配才能保证顺畅阅读?今天分享一篇专业的字体搭配科普文,有图有分析,还有贴心的中英字体搭配建议 >>> 阿卡林:这个问题涉及了两个概念:易认性(Legibility)和可读性(Readability). 易认性是辨识单个字符的难易度,也就是「辨认起来的方便程度」. 可读性是辨识整个单词,整个句子,整段文字的难易度,也就是在一大段文字丢给读者时,读者「阅读起来的快慢程度」. (以上引用来自于维基百科) 事实上,我们在报刊杂志中或者屏幕上所能

系统-硬盘分区内部原理？？？？

问题描述 硬盘分区内部原理???? 一块硬盘可以分为4个主分区,而系统在其中的一个分区中,那么这个分区就需要主导扇区来引导已经分区表来确定,不同系统的分区格式有可能不一样,现在一个硬盘要把分成几个区是要用的分区表来确定吗? 解决方案 无论操作系统和文件系统是怎样的,分区表.引导记录是公认的标准.所谓硬盘可以分为4个分区已经是老皇历了,现在的PC使用UEFI固件和新的GUID分区表,可以分无数的分区. 解决方案二: 为此,可以贴两篇科普文帮你扫盲下http://wenku.baidu.com/li

强劲大小核结构 三星将推八核处理器

四核刚出没多久,八核的消息就已传出,不得不让人感叹科技发展之快.近日有消息称, 三星正准备推出一款更为强劲的基于ARM架构的big.LITTLE(大小核)结构八核处理器,可在性能与功耗之间取得更好平衡.目前该计划已经提上日程,八核产品将可能在明年2月19日举行的国际固态电路会议上得到公布. big.LITTLE大小核结构 big.LITTLE大小核结构是ARM公司提出的一种针对性能与功耗的解决方案,big.LITTLE将ARM Cortex-A15 MPCore处理器的性能与Cortex-A7处