React简单使用二

RN是基于 React设计，了解React有助于我们开发RN应用;
React希望将功能分解化，让开发变得像搭积木一样，快速而且可维护
React主要3个特点如下：
1.作为UI（Just the UI）
2.虚拟DOM（Virtual DOM）
这是亮点是React最重要的一个特性放进内存最小更新的视图
差异部分更新 diff算法
3.数据流（Date Flow）单项数据流
学习React需要掌握哪些知识？
*JSX语法 js+xml
*ES6相关知识
*前端基础 css+div js
举例说明React的用法，IDE工具：WebStorm（JavaScript 开发工具Web前端开发神器插件丰富）
比如：RN 代码智能提醒
下载模板：https://github.com/wix/reat-templates安装命令npm install react-templates -g
10.下载webstorm破解版： http://down-www.newasp.net/big/webstorm2017.rar
*1.例子一（简单组件和数据传递）
使用this.props只想自己的属性
从 http://facebook.github.io/react/downloads.html下载react kit
react.js React-dom.js：React的核心文件
jsxtransformer.js browser.min.js：将jsx转译成js和html的工具
可以使用Node.js做预编译，可以安装react-tools工具

npm install -g react-tools

下载：react.js，react-dom.js，browser.min.js放在根目录

示例如下：

<!DOCTYPE html>
<html>
  <head lang="en">
    <Meta charset="UTF-8" />
    <title>Hello World</title>
      <script src="react.js"></script>
    <script src="react-dom.js"></script>
    <script src="browser.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

/*      ReactDOM.render(
        <h1>Hello,world!addf</h1>,document.getElementById('root')
      );*/
//创建一个组件
var HelloMessage=React.createClass(
    {
        render:function () {
            return <h1>Hello {this.props.name},my name is wangzai</h1>;
        }
    }
);
ReactDOM.render(
        <HelloMessage name="React 语法"/>,document.getElementById('root')
);
    </script>
  </body>
</html>

*2.例子二通过（this.state更新视图）

<!DOCTYPE html>
<html lang="en">
<head lang="en">
    <Meta charset="UTF-8"/>
    <title>Hello World</title>
    <script type="text/javascript" src="react.js"></script>
    <script type="text/javascript" src="react-dom.js"></script>
    <script type="text/javascript" src="browser.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
    var Timer = React.createClass(
        {
            /**
             *
             初始状态
             * */
            getinitialState: function () {
                return {secondsElapsed: 0};
            },tick: function () {
                this.setState({secondsElapsed: this.state.secondsElapsed + 1});
            },/**
             * 组装完成装载
             */
            componentDidMount: function () {
                this.interval = setInterval(this.tick,1000);
            },/**
             * 组件将被卸载，清除定时器
             */
            componentwillUnmount: function () {
                clearInterval(this.interval);
            },/**
             * 渲染视图
             */
            render: function () {
                return (<div>Seconds Elapsed：{this.state.secondsElapsed}</div>);
            }
        }
    );
    ReactDOM.render(<Timer />,document.getElementById("root"));
</script>
</body>
</html>

*3.例子三（简单应用）

<!DOCTYPE html>
<html lang="en">
<head lang="en">
    <Meta charset="UTF-8"/>
    <title>Hello World</title>
    <script src="react.js"></script>
    <script src="react-dom.js"></script>
    <script type="text/javascript" src="browser.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
    var ShowEditor=React.createClass(
        {
            getinitialState:function () {
              return {value:'请输入文字'};
            },handleChange:function (event) {
                this.setState({value: event.target.value});
            },render:function () {
                return(
              <div>
                  <h3>输入</h3>
                  <textarea style={{width:300,height:300,outline:'none'}}
                    onChange={this.handleChange}
                   ref="textarea"  defaultValue={this.state.value}
                  />
                  <h3>输出</h3>
                  <div>{this.state.value}</div>
              </div>
                );
            }
        }
    );
    ReactDOM.render(<ShowEditor />,document.getElementById("roots"));
</script></body></html>

原文地址：https://www.jb51.cc/react/302877.html

相关推荐