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>