React半科普文

  • React半科普文

    • 什么是React
    • getting started
    • 文件分离
    • Server端编译
    • 定义一个组件
    • 使用property
    • 组件嵌套
    • 组件更新
    • Virtual DOM
    • react native

什么是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-10-06 14:57:20

React半科普文的相关文章

Teensy HID攻击科普文

0x00 前言: 在2014年美国黑帽大会上,柏林SRLabs的安全研究人员JakobLell和独立安全研究人员Karsten Nohl展示了他们称为"BadUSB"(按照BadBIOS命名)的攻击方法.在认识BadUSB之前我们来先了解一种类似的攻击手法,使用Teensy芯片进行HID攻击,这种手法要古老的多,2010年左右,通过U盘伪装成为USB键盘输入恶意代码的攻击方式就已经相当成熟,并将这种攻击方式称为"Teensy HID攻击",Kautilya也是在20

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

Hadoop科普文——常见的45个问题解答 1.Hadoop集群可以运行的3个模式? 单机(本地)模式 伪分布式模式 全分布式模式 2.  单机(本地)模式中的注意点? 在单机模式(standalone)中不会存在守护进程,所有东西都运行在一个JVM上.这里同样没有DFS,使用的是本地文件系统.单机模式适用于开发过程中运行MapReduce程序,这也是最少使用的一个模式. 3.  伪分布模式中的注意点? 伪分布式(Pseudo)适用于开发和测试环境,在这个模式中,所有守护进程都在同一台机器上运行

Docz 用 MDX 写 React UI 组件文档

Docz 用 MDX 写 React UI 组件文档 前言 为了提升开发效率,创建一套 UI 组件库是一种较为有效的方式之一:可以减少重复工作.提高可复用,所以现在越来越多团队开始创建自己的 UI 组件库.较早的 Twitter 的 Bootstrap 虽然只能称为 UI 库,但也大大提升了开发效率.后面 MVVM 大行其道 ,前端终于可以把 HTML.CSS.JS 放在一起开发包含 UI .交互真正意义上的组件了,现在有基于 React 的 Material-UI.国内阿里金服基于 React

翻译React官网文档—— 入门创建一个Hello World

React的初衷是一个用于构建View层(界面)的javascript类库.后来规模越来越多又有了ReactNative. 不赘述如何搭建react了,由于是学习我们直接用CodePen(可能需要FQ,可以自行下载免费的Lantern),Codepen中我们可以自由的修改代码 通常学习任何语言都要写一个Hello World.Tack is cheep 直接上代码 Go! ReactDOM.render( <h1>Hello, world!</h1>, document.getEl

搜索引擎的搜索技巧——如何利用浏览器精准搜索（科普文）

1.什么是搜索引擎 搜索引擎是一个为用户提供信息"检索"服务的网站,它使用某些程序把因特网上的所有信息归类以帮助人们在茫茫网海中搜寻到所需要的信息. 搜索引擎分为全文搜索引擎(百度. Google.AltaVista.Inktomi.Teoma.WiseNut) 目录索引类搜索引擎(雅虎.搜狐.网易) 元搜索引擎(元搜网.go.com.InfoSpace.com.Dogpile.Vivisimo) 三大类型. 2.搜索引擎技术原理 组成:搜索器(Searcher).索引器(Indexe

【网络安全】Dos攻击科普文

目录 DOS攻击 什么是DOS攻击 攻击手段分类 具体的攻击方式举例 优秀博客参考 DDOS攻击 DOS攻击 什么是DOS攻击 DOS是Denial of Service的简称,用中文简单翻译就是拒绝服务.DOS攻击的目的是:通过耗尽服务器的CPU.内存和网络带宽等资源使服务器无法为用户提供正常服务或使得服务质量下降.总结下就是攻击服务器,使得服务器拒绝为正常的用户请求提供服务.(这样已解释,感觉DOS这个名字还取得挺形象的,哈哈~) 在网上找了个比较详细的解释: 作个形象的比喻来理解DoS.街

ARM简介(科普文)

ARM简介[1] 1. ARM只卖知识产权,不卖(物理的,实质的)产品.    全世界100多家公司购买了ARM授权,包括三星,Freescale.NXP Semiconductors.STMicroelectronics.Texas Instruments ,Toshiba,Analog Device,atmel,microsemi...具体参看ARM官网        经典 ARM 处理器 许可证数         ARM11 系列 82         ARM9 系列 271 Cortex

第13课 《科普文》

今天我们要讲的事情和Linus有关,世界上最出名的极客了.也许你对Linus不太熟悉,但是作为技术人的你一定知道Linux.伟大的Linux现在有上千个发行版在世界各地被使用,但今天我们要讲的可不是Linux,而是Linus的第二个作品--git.我们在日常的项目中都会用到git,它使我们的项目开发能够有序地进行.在当时,全球各地的志愿者要想将源代码贡献给Linux系统只能通过diff的方式发给Linus,然后由Linus本认通过手工方式对代码进行合并.但是这种方法好烦哦,随着代码库越来越大,人

科普文，搭建python开发环境

Python简介!首先,是一门面向对象的程序设计语言,先说3个优点!1.有条理,简单,易学,易用.2.强大!可以把其他编程语言制作的模块利用起来.3.拥有丰富的库.Python作为高级编程语言,拥有的特点:跨平台.开源的.免费的.解释型.Python的版本问题一定要清楚,目前来看,我们要用就用3.0版本.如果你感兴趣了,就看看在哪个领域发展吧!WEB开发,大数据处理,人工智能,自动化运维开发,云计算,爬虫,游戏开发. 如果您打算学习并且使用它,就要解决第一个问题,你的计算机系统能够支持它吗?个人