React简单使用（二）

来源：互联网发布：淘宝可以上闲鱼吗编辑：程序博客网时间：2024/05/21 17:36

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>

阅读全文

0 0