react--学习笔记4（react测试和简单开发）

╰半橙微兮° 2023-03-02 10:55 6阅读 0赞

# react三大属性： #

### 一、state ###

state：“状态机”，更新组件state来更新对应页面

当组件中有state，则不能使用工厂函数

**我写了俩种方法：一种是一般用来测试的，在HBuilder中编写，一种是用于简单开发的，在VScode中开发。**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>三大属性---state</title>
    	</head>
    	<body>
    		<div id='test'></div>
    		<script type="text/javascript" src="js/react.development.js"></script>
    		<script type="text/javascript" src="js/react-dom.development.js"></script>
    		<script type="text/javascript" src="js/babel.min.js"></script>
    		<script type="text/babel">
    			//定义组件
    		class Like extends React.Component{
    			//初始化状态
    			constructor(props){
    				super(props)
    				this.state={
    					isLike:false
    				}
    				//将新增方法中this，强制绑定组件对象
    				this.handleClick = this.handleClick.bind(this)
    			}
    			//新增添的方法：内部的this默认不是组件对象，而是undefined
    			handleClick(){
    			//得到状态并取反
    			const isLike = !this.state.isLike;
    			//更新状态
    			this.setState({isLike})
    			}
    			render(){
    				//读取状态
    				const {isLike} =this.state
    				return<h2 onClick={this.handleClick}>{isLike ? '我喜欢你':'你喜欢我'}</h2>
    			}
    		}
    		//渲染组件
    		ReactDOM.render(<Like />,document.getElementById('test'));
    		</script>
    	</body>
    </html>

![20200729101111590.gif][]

//子组件
    import React from 'react'
    // import "./bb.css"
    //定义组件
    class Like extends React.Component{
        //初始化状态
        constructor(props){
            super(props)
            this.state={
                isLike:false
            }
            this.handliClick = this.handliClick.bind(this)
        }
        //新添加功能方法
        handliClick(){
            const isLike = !this.state.isLike;
            this.setState(
                {isLike}
            )
        }
        render(){
            //读取数据
            const { isLike } = this.state
            return(
            <div className='nn'>
                <h2 onClick={this.handliClick}>{isLike ? '我喜欢你' : '你喜欢我'}</h2>
            </div>
            )
        }
    }
    //导出组件
    export default Like;

把<Like / >写入父组件中。

### 二、props（properties） ###

1.  组件标签的所有属性都保存在props中
2.  作用：通过标签属性从组件外向组件内传递变化的数据，注意: 组件内部不要修改props数据
3.  对props中的属性值进行类型限制和必要性限制   ---------*Person.propTypes = \{*                                                                *name: React.PropTypes.string.isRequired,                                                                                                                              **age: React.PropTypes.number.isRequired*      *\}*
4.  默认属性值  --------*Person.defaultProps = \{*     *name: 'Mary'*    *\}*

**我写了俩种方法：一种是一般用来测试的，在HBuilder中编写，一种是用于简单开发的，在VScode中开发**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>props组件</title>
    	</head>
    	<body>
    		<div id="example"></div>
    		<div id="example1"></div>
    		<script type="text/javascript" src="js/react.development.js"></script>
    		<script type="text/javascript" src="js/react-dom.development.js"></script>
    		<script type="text/javascript" src="js/prop-types.js"></script>
    		<script type="text/javascript" src="js/babel.min.js"></script>
    		<script type="text/babel">
    //			需求: 自定义用来显示一个人员信息的组件
    //				1). 姓名必须指定
    //				2). 如果性别没有指定, 默认为男
    //				3). 如果年龄没有指定, 默认为18
    			//定义组件工厂函数型
    //			function Person(props){
    //				return(
    //					<ul>
    //						<li>name:{props.name}</li>
    //						<li>sex:{props.sex}</li>
    //						<li>age:{props.age}</li>
    //					</ul>
    //				)
    //			}
    
    
    //ES6类的写法
    class Person extends React.Component{
    	render(){
    		return(
    			<ul>
    				<li>name:{this.props.name}</li>
    				<li>sex:{this.props.sex}</li>
    				<li>age:{this.props.age}</li>
    			</ul>
    		)
    	}
    }
    			//渲染组件
    			const p1 ={name:'李磊', sex:'男',age:10}
    			const p2 ={ name:'雷恩礼' }
    			//指定属性值的类型和必要性
    			Person.PropTypes = {
    				name: PropTypes.string.isRequired,
    				age: PropTypes.number.isRequired
    			}
    			//指定属性默认值
    			Person.defaultProps= {
    			 sex:'男',
    			 age:21
    			}
    //			ReactDOM.render(<Person name={p1.name} sex={p1.sex} age={p1.age}/>, document.getElementById("example"));
    			
    			//...是将很多东西打包 ，然后进行解包的过程
    			//...作用：
    //			1.打包， eg： function fn(...as){}  fn(1,2,3)，此时将fn（1,2,3）打包放到as数组中
    //          2.解包，eg: const arr1 =[1, 2, 3] const arr2 =[6, ...arr1, 9]，此时就是将arr1数组解包放到arr2中
    			ReactDOM.render(<Person {...p1}/>, document.getElementById("example"));
    			ReactDOM.render(<Person name={p2.name} />, document.getElementById("example1"))
    		</script>
    	</body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70][]

首先，新建person.jsx文件填写内容如下：

import React from 'react'
    
    //定义组件
    function Person(props){
        return(
            <ul>
                <li>name: {props.name}</li>
                <li>sex: {props.sex}</li>
                <li>age: {props.age}</li>
                <br/>
                <br/>
                <li>name: {props.name1}</li>
                <li>sex: {props.sex1}</li>
                <li>age: {props.age1}</li>
            </ul>
        )
    }
    
    Person.defaultProps= {
        sex1:'男',
        age1:21
       }
    export default Person;

在react的App.js中导入组件：

import Person from "./demo/person";
    
     //声明变量
      const person1 ={ name: 'Lisa', sex: '女', age: 25 }
      const person2 ={ name: '安琪儿' }
    < Person name={ person1.name} sex={ person1.sex} age={person1.age} name1={person2.name}/>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70 1][]

###  三、refs与事件处理 ###

当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs

*  组件内的标签都可以定义ref属性来标识自己
    
    1.  <input type="text" ref=\{input => this.msgInput = input\}/>
    2.  回调函数在组件初始化渲染完或卸载时自动调用
 *  在组件中可以通过this.msgInput来得到对应的真实DOM元素
 *  作用: 通过ref获取组件内容特定标签对象, 进行读取其相关数据

**事件处理：**

1.  通过onXxx属性指定组件的事件处理函数(注意大小写)
    
    1.  React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
    2.  React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
2.  通过event.target得到发生事件的DOM元素对象

*                 <input onFocus=\{this.handleClick\}/>*

*                  handleFocus(event) \{*

*                  event.target  //返回   input对象    **\}*

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>refs</title>
    		
    	</head>
    	<body>
    		<div id="test"></div>
    		<script type="text/javascript" src="js/react.development.js"></script>
    		<script type="text/javascript" src="js/react-dom.development.js"></script>
    		<script type="text/javascript" src="js/prop-types.js"></script>
    		<script type="text/javascript" src="js/babel.min.js"></script>
    		<script type="text/babel">
    			//定义组件
    			class MyComponent extends React.Component{
    				constructor(props){
    					super(props)
    					
    					this.inputShow= this.inputShow.bind(this)
    					this.handleBlar= this.handleBlar.bind(this)
    				}
    				inputShow(){
    					const input =this.refs.content
    					//alert(input.value)
    					alert(this.input.value)
    				}
    				handleBlar(event){
    					alert(event.target.value)
    				}
    				render(){
    					return(
    						<div>
    						//旧版本写法
    						//<input type="text" ref="content"/>  
    						<input type="text" ref={input => this.input =input}/>  
    						<button onClick={this.inputShow}>请输入内容</button>  
    						<input type="text" placeholder="失去焦点" onBlur={this.handleBlar}/>
    						</div>
    						
    					)
    				}
    			}
    			
    			//渲染组件
    			ReactDOM.render(<MyComponent />, document.getElementById('test'));
    		</script>
    	</body>
    </html>

![2020080509483549.gif][]

### 注意 ： ###

*  组件内置的方法中的this为组件对象
 *  在组件类中自定义的方法中this为null
    
    1.  强制绑定this: 通过函数对象的bind()
    2.  箭头函数(ES6模块化编码时才能使用)

### 面试题： ###

问题: 请区别一下组件的props和state属性

1.  state: 组件自身内部可变化的数据
2.  props: 从组件外部向组件内部传递数据, 组件内部只读不修改

[20200729101111590.gif]: /images/20230208/9760e0fda4d54299abaf1fd535beae07.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70]: /images/20230208/52ccbfd433b443ad945bb39d632071fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FCVV9NT2xJX0lUVUk_size_16_color_FFFFFF_t_70 1]: /images/20230208/11b7b9127d7141cbbc90690fd9eda81c.png
[2020080509483549.gif]: /images/20230208/d34320a1427940aab9f5c79726b2d3aa.png