React教程（一）
React：
官网：进入官网后，最先引入眼帘的是这样一段描述：“用于构建用户界面的 JavaScript 库”，非常的霸气侧漏，这也是我决定学习它的原因。
特点： 声明式（交互容易）、组件化（大型项目）、一次学习，随处编写（支持手机、浏览器等）
使用CDN的方式
- demo1: 最简单的Hello World
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>React Dome</title> <!-- CDN方式引入 --> <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <!-- 也可以i使用npm add react react-dom --save 安装一个node-moudle包都有js，可以引用 --> </head> <body> <div id="app"> </div> <script type="text/babel"> // 生成一个DOM，如果生成的dom过多时会使用虚拟dom来插入到真实的DOM中 var hello = React.createElement('h1',{ className:'red', // 添加属性 name:'jack' },"Hello React!") ReactDOM.render(hello,document.getElementById('app')) </script> </body> </html> - demo2: jsx，一种js和html+xml交互的方式
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>React Dome</title> <!-- CDN方式引入 --> <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <!-- 也可以i使用npm add react react-dom --save 安装一个node-moudle包都有js，可以引用 --> <!-- 引入babel可以进行jsx的语法解析 --> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <style> .blue{ color:blue; } </style> </head> <body> <div id="app"></div> <div id="app1"></div> <script type="text/babel"> // js中插入html代码，其实框架中帮我们创建 ReactDOM.render( // jsx是完成我们可以在js中完成html代码的编写，同时可以html中可以嵌套js代码，属于语法糖 <h1 className="blue" name="wang">Hello Jsx</h1> // 注意这里不能是class因为它是js的关键字 ,document.getElementById('app')) // 使用js中嵌套html var name = "wangl" var ele = <h1>Hello : {name}</h1> // html中插入js变量 ReactDOM.render( ele, document.getElementById('app1') ) </script> </body> </html> - demo3: 生命周期
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>React Dome</title> <!-- CDN方式引入 --> <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <!-- 也可以i使用npm add react react-dom --save 安装一个node-moudle包都有js，可以引用 --> <!-- 引入babel可以进行jsx的语法解析 --> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <style> .blue{ color:blue; } </style> </head> <body> <div id="app3"></div> <script type="text/babel"> // 生命周期函数演示 // 标准组件，带生命周期(带状态），查创建一个class对象继承Component class HelloJack extends React.Component { constructor (props) { // 构造函数 console.log("初始化阶段") // 初始化props，组件上的属性 super(props); // 初始化状态 this.state = { name:"Xing", age:30 } } componentWillMount(){ // 常用于发送ajax请求 console.log("组件加载之前") } componmentDidMount(){ console.log("组件加载后") } updateUser = ()=>{ // => 函数 this.setState({ // this是指向上下文的button，自动触发更新，并render name:"666", age:30 }) } shouldComponentUpdate(){ // 返回true更新 console.log("数据是否更新？") // 逻辑判断... return true; // 默认为true，不用实现 } componentWillUpdate(){ console.log("数据将要更新") } componentDidUpdate(){ console.log("数据已经更新") } render(){ console.log('组件加载中或者数据更新') return <div> <h1>Hello: {this.props.name}, 默认值：{this.state.name}</h1> <p>年纪： {this.props.age}</p> <button onClick={this.updateUser}>更新数据</button> </div> // 带参数的传递使用this } } ReactDOM.render( <HelloJack name="xxx" age="25"/>, document.getElementById('app3') ) </script> </body> </html> - demo4: 组件传参
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>React Dome</title> <!-- CDN方式引入 --> <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <!-- 也可以i使用npm add react react-dom --save 安装一个node-moudle包都有js，可以引用 --> <!-- 引入babel可以进行jsx的语法解析 --> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <style> .blue{ color:blue; } </style> </head> <body> <div id="app"></div> <div id="app1"></div> <div id="app3"></div> <script type="text/babel"> // 组件化开发：函数组件（无状态）、标准组件（有状态，可以使用this代表class的实例） // 创建函数返回一个jsx，函数组件 function Hello() { return <h1> Hello, Jack</h1> } ReactDOM.render( <Hello/>, // 这里直接调用函数名加<>,就成为了组件了 document.getElementById('app') ) function Hello_plus(props){ return <div> <h1>Hello: {props.name}</h1> <p>年纪： {props.age}</p> </div> } ReactDOM.render( <Hello_plus name="Li" age="23"/>, document.getElementById('app1') ) // 标准组件，带生命周期(带状态），查创建一个class对象继承Component class HelloJack extends React.Component { // render() { // 渲染 // return <h1> Hello JackLove </h1> // } render(){ return <div> <h1>Hello: {this.props.name}</h1> <p>年纪： {this.props.age}</p> </div> // 带参数的传递使用this } } ReactDOM.render( <HelloJack name="xxx" age="25"/>, document.getElementById('app3') ) </script> </body> </html> - demo5: render渲染函数
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>React Dome</title> <!-- CDN方式引入 --> <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <!-- 也可以i使用npm add react react-dom --save 安装一个node-moudle包都有js，可以引用 --> <!-- 引入babel可以进行jsx的语法解析 --> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <style> .blue{ color:blue; } </style> </head> <body> <div id="app"></div> <div id="app1"></div> <script type="text/babel"> // 元素的实时渲染 function tick() { // 使用js中嵌套html,react 是单向数据流 var time = new Date().toLocaleTimeString(); var ele = <div> <h1>Hello : Wang </h1> <h1>{time}</h1> </div> // 当要渲染的标签是多个时必须要又一个父标签，类似与vue中的template下必须要有一div ReactDOM.render( ele, document.getElementById('app1') ) } setInterval(tick,1000) </script> </body> </html>
相对而言，React的学习成本可以相对低，网上有很多教程，如果可以我们可以通过网上更好的学习，这里推荐去官网学习，已经很详细了（基础），对于更加深入的学习，我们会使用react来创建一个比较复杂的应用。
