React入门

一、文档结构

1、需要引入3个文件

		<script src="build/react.js" type="text/javascript" charset="utf-8">script>
		<script src="build/react-dom.js" type="text/javascript" charset="utf-8">script>
		<script src="build/browser.min.js" type="text/javascript" charset="utf-8">script>

2、script标签的type要写成type/babel

	<body>
		<div id="example1">
			
		div>
		<div id="example2">
			
		div>
		<div id="example3">
			
		div>
    
		<script type="text/babel">
			ReactDOM.render(
				<div>
					<h1>我是h1</h1>
					<h1>我是h1</h1>
				</div>
				,
				document.getElementById("example2")
			)
		script>
	body>

ReactDOM.render(html标签,渲染到哪里的dom元素)

注意点：

(1)react的js代码中可以直接写html标签（不分任何js语句，都可直接嵌套html标签）

(2)react中的变量在标签中使用 一个大括号包裹{ }

		<script type="text/babel">
			var arr=[10,20,30,40]
      //数组元素直接写成html标签
      var arr2 = [
        <li>list1</li>,
        <li>list2</li>,
        <li>list3</li>
      ]
			ReactDOM.render(
				<ul>
        //变量使用{}包裹
					{
						arr.map((v,index)=>{
							return <li key={index}>{v}</li>
						})	
					}
				</ul>
				
				,
				document.getElementById("example")
			)
		</script>

二、组件

1、创建组件的两种方式

(1)`React.createClass()`

render里面的return()：注意这里是()

		<script type="text/babel">
      //创建组件
      var Box = React.createClass({
        render(){
          return(
            <div>
            		<h1>我是Box组件</h1>
            </div>
          )
        }
      })
		//调用组件直接写标签即可
			ReactDOM.render(
				<div>
		        <Box></Box>
		        <Box></Box>
        </div>
        ,
				document.getElementById("example")
			)
		</script>

父子组件传递参数：

1>属性名传递，this,props接收

注意接收参数时要加{}

2>给参数设置默认值

在组件内使用方法**getDefaultProps()**设置默认值

或者在组件外使用属性 **defaultProps**设置默认值

		<script type="text/babel">
      //创建组件
      var Box = React.createClass({
        //使用方法设置默认值
        getDefaultProps(){
          return{
            user:"李四"
          }
        }
        //渲染组件
        render(){
          return(
            <div>
            		<h1>接收参数：{this.props.user}</h1>
            </div>
          )
        }
      })
      //使用属性设置默认值
      Box.defaultProps={
        user:"王五"
      }
      
		//调用组件直接写标签即可
			ReactDOM.render(
				<div>
		        <Box user="望穿先生"></Box>
		        <Box></Box>
        </div>
        ,
				document.getElementById("example")
			)
		</script>

(2)通过构造函数创建组件

class Box extends React.Component{}

构造函数通过方法设置默认值不会自动执行，要加static

			class Box extends React.Component{
        //设置默认值
				static get defaultProps(){
					return{
						user:"xxx",
						tel:"120"
					}
				}
				render(){
					return(
						<div>
							<h1>姓名：{this.props.user}</h1>
							<h1>电话：{this.props.tel}</h1>
							<hr/>
						</div>
					)
				}
			}

2、在组件标签中写常规标签

在组件中通过**this.props.children**接收

		<script type="text/babel">
      //创建组件
      var Box = React.createClass({
        //渲染组件
        render(){
          return(
            <div>
            //通过.children接收参数
            		<h1>{this.props.children}</h1>
            //也可以对.children进行遍历操作
            {
            	this.props.children.map(v=>{
            			return <li> {v} </li>
            		})		
            }
            </div>
          )
        }
      })
      
		//调用组件直接写标签即可
			ReactDOM.render(
				<div>
		        <Box>
        				<em>我是em</em>
        				<b>我是b标签</b>
        		</Box>
        </div>
        ,
				document.getElementById("example")
			)
		</script>

3、在组件中调用其他组件

(1)和普通标签一样，通过this.props.children接收

(2)在组件的创建中直接写

      //创建组件
      var Box = React.createClass({
        //渲染组件
        render(){
          return(
            <div>
								//直接调用其他组件
            	<inp><inp>
            </div>
          )
        }
      })

4、实现数据的双向绑定(state)

由于创建组件的两种不同方式，实现双向绑定也有对应的两种方式

方法一：构造函数方法

通过state定义变量

**1>**属性要写在constructors中

**2>**要通过super(props)继承props

**3>**设置state的值使用this.setState({})

**4>**在组件中使用state的值要通过this.state.v (要加{ })

**5>**绑定事件onchange

区分之前的绑定事件,react中的事件调用要加{},并且写成箭头函数的形式进行嗲欧总

onChange={()=>this.che()}

**6>**获取dom元素的值，要使用ref属性进行绑定，通过this.refs.myr.value进行取值

			/*定义组件*/
			class Box extends React.Component{
				constructor(props){
					super(props);
          //设置state中的变量
					this.state={
						v:1
					}
				}
				che(){
					/*设置v的值=input.value*/
					this.setState({
						v:this.refs.myr.value
					})
				}
				render(){
					return(
						<div>
							<input type="text"
								value={this.state.v}
								onChange={()=>this.che()}
								ref="myr"
								/>
							<h1>输出：{this.state.v}</h1>
						</div>
					)
				}
			}
			
			ReactDOM.render(
				<div>
					
					<Box>
						
					</Box>
					
				</div>
				
				,
				document.getElementById("example")
			)

方法二：`React.createClass()`

**1>**和构造函数方法只有定义state的方式不同，其他的实现都相同

**2>通过getInitialState()**方法定义state

			var Box=React.createClass({
				getInitialState(){
					return{
						v:""
					}
				},
				che(){
					this.setState({
						v:this.refs.myr.value
					})
				},
				render(){
					return(
						<div>
							<input type="text"
								value={this.state.v}
								onChange={this.che}
								ref="myr"
								/>
							<h1>输出：{this.state.v}</h1>
						</div>
					)
				}
			})

5、组件之间传递函数

同样采用属性名传递参数的方法，通过this.props.fun()(这里的fun是自定义的函数）

举例说明：

//Box组件			
var Box=React.createClass({
				getInitialState(){
					return{
						v:""
					}
				},
				mych(m){
					this.setState({
						v:m
					})
				},
				clearA(){
					this.setState({
						v:""
					})
				},
				render(){
					return(
						<div>
							<Inp myv={this.state.v} onch={this.mych}></Inp>
							<button onClick={this.clearA}>清空</button>
						</div>
					)
				}
			})
//Inp组件
var Inp=React.createClass({
				che(){
					this.props.onch(this.refs.myr.value)
				},
				render(){
					return(
						<input type="text"
							value={this.props.myv}
							onChange={this.che}
							ref="myr"
							/>
					)
				}
			})

6、组件应用小例子（筛选）

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		<script src="build/react.js" type="text/javascript" charset="utf-8">script>
		<script src="build/react-dom.js" type="text/javascript" charset="utf-8">script>
		<script src="build/browser.min.js" type="text/javascript" charset="utf-8">script>
		<style type="text/css">
			
		style>
	head>
	<body>
		<div id="example">
			
		div>
		
		<script type="text/babel">
			var TabOne=React.createClass({
				render(){
					return(
						<tr>
							<td>{this.props.good.name}</td>
							<td>{this.props.good.price}</td>
						</tr>
					)
				}
			})
			var TabTwo=React.createClass({
				render(){
					return(
						<tr>
							<td><h3>{this.props.category}</h3></td>
						</tr>
					)
				}
			})
			var TabAll=React.createClass({
				
				render(){
					var list=[];
					var searchWord=this.props.searchWord
					var goods=this.props.goods
					console.log(goods)
					var category=""
					goods.forEach((v,index)=>{
						if(category!=v.category){
							list.push(<TabTwo key={category} category={v.category}></TabTwo>)
						}
						category=v.category;
						if(v.name.indexOf(searchWord)==-1){
							return
						}
						list.push(<TabOne key={index} good={v}></TabOne>)
						
						
					})
					return(
						<table>
							<tbody>
								{list}
							</tbody>
							
						</table>
					)
				}
			})
			var Box=React.createClass({
				getInitialState(){
					return{
						searchWord:""
					}	
				},
				mych(m){
					this.setState({
						searchWord:m
					})
				},
				render(){
					return(
						<div>
							<Inp searchWord={this.state.searchWord} onch={this.mych}></Inp>
							<TabAll searchWord={this.state.searchWord} goods={this.props.products}></TabAll>
						</div>
					)
				}
			})
			var Inp=React.createClass({
				che(){
					this.props.onch(this.refs.myr.value)
				},
				render(){
					return(
						<input type="text"
							value={this.props.searchWord}
							onChange={this.che}
							ref="myr"
							/>
					)
				}
			})
			var PRODUCTS = [
			  {category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'},
			  {category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},
			  {category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'},
			  {category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'},
			  {category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'},
			  {category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'}
			];
			
			ReactDOM.render(
				<div>
					
					<Box products={PRODUCTS}>
						
					</Box>
					
				</div>
				
				,
				document.getElementById("example")
			)
		script>
	body>
html>

三、React的生命周期

react的生命周期分为哪几个阶段？每个阶段的作用？

分为3个阶段，分别是：

1. Mounting（挂载阶段）——创建构造函数并初始化，让我们在页面加载完成前后做一些事情

2. Updating（运行阶段）——状态更新引起的变化，更新页面UI显示或数据更改

3. Unmounting（卸载阶段）——销毁一个组件，销毁前暴露出一个事件，让我们可以在组件销毁前做一些逻辑的处理，

比如组件销毁后，也要将组件的定时器销毁，减少内存占用

react各阶段事件节点有哪些？

挂载阶段

\1. componentWillMount()-组件将要加载，但还没有加载出来，js逻辑已经可以执行, 异步方法可以放在这里执行

\2. componentDidMount()-组件加载完成

运行阶段

\1. componentWillUpdate(nextProps,nextState)-组件将要更新

\2. componentDidUpdate(nextProps,propsState)-组件更新完成

卸载阶段

\1. componentWillUnmount()-组件将要被销毁

还有2个比较特殊的

\1. componentWillReceiveProps(nextProps)-接收父组件传递过来的参数props时触发

\2. shouldComponentUpdate()-判断组件是否需要更新, 它需要一个返回值，默认为true，若为false则组件不更新

react整个生命周期加载的过程

创建构造函数constructor并初始化，然后执行componentWillMount()将要加载，接着render()出来, 最后componentDidMount()加载完成

react更新的过程

首先执行shouldComponentUpdate(), 看返回值是不是true，如果是true则继续执行componentWillUpdate()将要更新，然后

render()，最后更新完毕componentDidUpdate()；若返回值为false，则组件不会更新。如果是组件传值引起的数据改变，

需要在shouldComponentUpdate()执行前先执行componentWillReceiveProps()来接收父组件传递过来的值

数字切换小例子

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		<script src="build/react.js" type="text/javascript" charset="utf-8">script>
		<script src="build/react-dom.js" type="text/javascript" charset="utf-8">script>
		<script src="build/browser.min.js" type="text/javascript" charset="utf-8">script>
		<style type="text/css">
			
		style>
	head>
	<body>
		<div id="example">
			
		div>
		
		<script type="text/babel">
			
			var Box=React.createClass({
				getInitialState(){
					return {
						c:0,
						op:1
					}
				},
                //当挂载完成
				componentDidMount(){
					var that=this;
					setInterval(function(){
						var p=that.state.op-0.02;
						if(p<=0){
							p=1
						}
						that.setState({
							op:p
						})
					},40)
					
					setInterval(function(){
						that.setState({
							c:that.state.c+1
						})
					},2000)
				},
				render(){
					return(
						<div>
							<h1 style={{opacity:this.state.op}}>{this.state.c}</h1>
						</div>
					)
				}
				
				
			})
			
			
			ReactDOM.render(
				<div>
					
					<Box>
						
					</Box>
					
				</div>
				
				,
				document.getElementById("example")
			)
		script>
	body>
html>

四、React例子

https://react.rocks/

是react自己的一些写好的小例子

相关阅读:
YOLOV5通道剪枝【附代码】
「学习笔记」组合计数与中国剩余定理
 深入了解 GPU 互联技术——NVLINK
【C语言刷LeetCode】面试题 10.09. 排序矩阵查找(M)
【NDK Lab】环境搭建以及so打包和使用
 Java对接（BSC）币安链 | BNB与BEP20的开发实践（二）BNB转账、BEP20转账、链上交易监控
 计算机毕业设计之java+springboot基于vue的书籍学习平台
 Mybatis中where标签和if标签结合使用说明
 无序去重代码
 面向对象12:什么是多态
原文地址：https://blog.csdn.net/weixin_55983004/article/details/127124309

React入门

React入门

一、文档结构

二、组件

1、创建组件的两种方式

(1)React.createClass()

(2)通过构造函数创建组件

2、在组件标签中写常规标签

3、在组件中调用其他组件

4、实现数据的双向绑定(state)

方法一：构造函数方法

方法二：React.createClass()

5、组件之间传递函数

6、组件应用小例子（筛选）

三、React的生命周期

数字切换小例子

四、React例子

(1)`React.createClass()`

方法二：`React.createClass()`