nodejs（2）：前段框架 React 学习设计

来源：互联网发布：部落冲突猪升级数据编辑：程序博客网时间：2024/06/05 04:44

本文的原文连接是:http://blog.csdn.net/freewebsys/article/details/77639066 未经博主允许不得转载。
博主地址是：http://blog.csdn.net/freewebsys

1，关于React

React.js（React）是 Facebook 推出的一个用来构建用户界面的 JavaScript 库。
出于灵活性考虑，React使用JavaScript来构建用户界面，没有选择HTML。
使用 jsx的语法，JSX 是一个静态类型、面向对象的编程语言，主要设计用来在浏览器上运行，你可以把它当作是 JavaScript 的增强版本。
JSX最大的特色就是就是在JavaScript中嵌入和HTML表达式。

官方网站：https://facebook.github.io/react/

2，第一Helloworld

最新的版本是15.6.1，由于是使用的jsx进行代码的编写。
需要使用 eabel 进行翻译才能运行。

http://babeljs.io/repl/

需要说明的是最新的react 需要引入 react.min.js 和 react-dom.min.js 两个js类库。同时要用 babel 的5.x 版本。6的版本好像和react配合有问题。

<html>    <head>        <title>new react demo</title>        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script>        <script type="text/babel">            class HelloWorld extends React.Component {                constructor(){                    super();                    this.state = { count: 1 };                }                render(){                    return (                        <div>                            <h2> Hello World ! </h2>                            <h3> {this.state.count} </h3>                        </div>                    )                }            }            let myCount = ReactDOM.render(                <HelloWorld/>,                document.getElementById('root')            );        </script>    </head>    <body>        <div id="root"></div>    </body></html>

其中在react中使用 render 返回 html 代码片段。
在定义了react的class之后就可以使用react的组件了。

ReactDOM.render(                <HelloWorld/>,                document.getElementById('root')            );

直接使用组件。
还是非常方便的。

3，定时更新

<html>    <head>        <title>new react demo</title>        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>        <script type="text/babel">        function tick() {          const element = (            <div>              <h1>Hello, world!</h1>              <h2>It is {new Date().toLocaleTimeString()}.</h2>            </div>          );          ReactDOM.render(            element,            document.getElementById('root')          );        }        setInterval(tick, 1000);    </script>    </head>    <body>        <h1>hello world react .</h1>        <div id="root"></div>    </body></html>

可以在chrome上面安装一个react的插件，来分析react的模板结构。

使用setInterval定时器。间隔1秒钟。执行一次绑定。
虽然也是更新，但是react只更新变化的部分。也就是只更新时间，而hello world没有更新。

4，总结

react 使用了jsx，最大的特点就是里面key直接写html 片段了。
这个就能方便的写些常用的组件了。加快了开发效率。

本文的原文连接是:http://blog.csdn.net/freewebsys/article/details/77639066 未经博主允许不得转载。
博主地址是：http://blog.csdn.net/freewebsys

阅读全文

0 0