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

最新推荐文章于 2023-04-04 17:53:54 发布

ABU_MOlI_ITUI

最新推荐文章于 2023-04-04 17:53:54 发布

阅读量5.2k

点赞数

分类专栏： react 文章标签： react

本文链接：https://blog.csdn.net/ABU_MOlI_ITUI/article/details/107656312

版权

react 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

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>

//子组件
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）

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

首先，新建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}/>

三、refs与事件处理

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

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

事件处理：

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

<input onFocus={this.handleClick}/>

handleFocus(event) {

event.target //返回 input对象 }

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>refs</title>
		<!--需求:  1.自定义组件, 功能说明如下:
  			      2. 点击按钮, 提示第一个输入框中的值
  			      3. 当第2个输入框失去焦点时, 提示这个输入框中的值-->
	</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"/>&nbsp;&nbsp;
						<input type="text" ref={input => this.input =input}/>&nbsp;&nbsp;
						<button onClick={this.inputShow}>请输入内容</button>&nbsp;&nbsp;
						<input type="text" placeholder="失去焦点" onBlur={this.handleBlar}/>
						</div>
						
					)
				}
			}
			
			//渲染组件
			ReactDOM.render(<MyComponent />, document.getElementById('test'));
		</script>
	</body>
</html>

注意：

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

面试题：

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

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

ABU_MOlI_ITUI

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react--学习笔记4（react测试和简单开发）

react三大属性：一、statestate：“状态机”，更新组件state来更新对应页面当组件中有state，则不能使用工厂函数我写了俩种方法<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>三大属性---state</title> </head> <body> <div id='test'&gt
复制链接

扫一扫