React 组件实例的三大属性

props基本使用
1. 批量传递props / 批量传递标签属性
  1. 展开运算符
2. 限制
  1. 构造器能省略尽量省略
函数式组件使用props
1. 函数式组件也可以进行限制
refs
1. 字符串写法不建议用
2. 回调函数的ref
  1. 回调ref函数执行次数
  2. createRef的使用

React笔记

props基本使用

批量传递props / 批量传递标签属性

<body>
	<!-- 准备好一个"容器" -->
	<div id="test1"></div>
	<div id="test2"></div>
	<div id="test3"></div>
	
	<script type="text/babel">
		// 创建组件
		class Person extends React.Component{
			render(){
				// console.log(this);
				const {name,age,sex} = this.props
				return (
					<ul>
						<li>姓名: {name}</li>
						<li>性别: {sex}</li>
						<li>年龄: {age+1}</li>
					</ul>
				)
			}
		}
		// 渲染组件到页面
		ReactDOM.render(<Person name="jerry" age={19}  sex="男"/>,document.getElementById('test1'))
		ReactDOM.render(<Person name="tom" age={18} sex="女"/>,document.getElementById('test2'))

		const p = {name:'兰莉',age:18,sex:'女'}
		// console.log('@',...p);
		// ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex}/>,document.getElementById('test3'))

		//  展开运算符<Person {...p}/> 相当于 {name:'兰莉',age:18,sex:'女'}
        {...p} 中{ }是转义字符, 实际上是..p发挥作用, ..p仅在标签对中可以使用
		ReactDOM.render(<Person {...p}/>,document.getElementById('test3'))
	</script>
</body>

展开运算符

数组加减

<body>
	<script type="text/javascript" >
		let arr1 = [1,3,5,7,9]
		let arr2 = [2,4,6,8,10]
           // 展开一个数组
		console.log(...arr1); 
           // 连接数组
		let arr3 = [...arr1,...arr2]
		
		//  数组求和    在函数中使用
		function sum(...numbers){
			return numbers.reduce((preValue,currentValue)=>{
				return preValue + currentValue
			})
		}
		console.log(sum(1,2,3,4));
           </script>
</body>

克隆

<body>
	<script type="text/javascript" >
		// 构造字面量对象时使用展开语法
		let person = {name:'tom',age:18}
           //  展开运算符复制一个对象
		let person2 = {...person}
		// console.log(...person); 
           // 报错, 展开运算符不能展开对象
		person.name = 'jerry'
		console.log(person2);
		console.log(person);
       </script>
</body>

合并

<body>
	<script type="text/javascript" >
		// 合并
		let person3 = {...person,name:'jack',address:"地球"}
		console.log(person3);
		
	</script>
</body>

限制

<body>
	<!-- 引入prop-types, 用于对组件标签属性进行限制 -->
	<script type="text/javascript" src="../js/prop-types.js"></script>
	<script type="text/babel">
		//创建组件
		class Person extends React.Component{
			render(){
				// console.log(this);
				const {name,age,sex} = this.props
				//props是只读的
				//this.props.name = 'jack' //此行代码会报错, 因为props是只读的
				return (
					<ul>
						<li>姓名：{name}</li>
						<li>性别：{sex}</li>
						<li>年龄：{age}</li>
					</ul>
				)
			}
		}
		//对标签属性进行类型、必要性的限制
		Person.propTypes = {
            //限制name必传, 且为字符串
			name:PropTypes.string.isRequired,
            //限制sex为字符串
			sex:PropTypes.string,
            //限制age为数值
			age:PropTypes.number,
            //限制speak为函数 func = function
			speak:PropTypes.func,
            
		}
		//指定默认标签属性值
		Person.defaultProps = {
			sex:'男女同体',//sex默认值为男女同体
			age:"已经死了" //age默认值为已经死了
		}
		//渲染组件到页面
		ReactDOM.render(<Person name="哈哈哈" speak={speak}/>,document.getElementById('test1'))
		ReactDOM.render(<Person name="tom" age={18} sex="女"/>,document.getElementById('test2'))

		const p = {name:'老刘',age:18,sex:'女'}
		// console.log('@',...p);
		// ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex}/>,document.getElementById('test3'))
		ReactDOM.render(<Person {...p}/>,document.getElementById('test3'))

		function speak(){
			console.log('我会讲话了');
		}
	</script>
</body>

构造器能省略尽量省略

// 构造器是否接收props 是否传递给super 取决于是否希望在构造器中通过this访问props
costructor(props){
	console.log(props)
	// 构造器必写super 传值作用
	super(props)
	// 接props或者不接props, 可以用this.props来分析区别
	// console.log('costructor',this.props);
	// 相当于
	console.log('costructor',props);
}

// 也可以

state = {}

// 也可以用箭头函数

demo = ()=>{
	// 函数体
}

函数式组件使用props

<body>
	<script type="text/babel">
	functiom Person (props){
		const { name, age, sex } = props
		return (
			<ul>
				<li>姓名：{name}</li>
				<li>性别：{sex}</li>
				<li>年龄：{age}</li>
			</ul>
		)
	}
	// 渲染组件到页面
	ReactDOM.render(<Person name="史迪奇" age="未知" sex="未知"/>,document.getElementById('test1'))
</script>
</body>

函数式组件也可以进行限制

<body>
	<script type="text/babel">
	functiom Person (props){
		const { name, age, sex } = props
		return (
			<ul>
				<li>姓名：{name}</li>
				<li>性别：{sex}</li>
				<li>年龄：{age}</li>
			</ul>
		)
	}
			Person.propTypes = {
			name:PropTypes.string.isRequired, //限制name必传, 且为字符串
			sex:PropTypes.string,//限制sex为字符串
			age:PropTypes.string,//限制age为字符串
		}

		//指定默认标签属性值
		Person.defaultProps = {
			sex:'未知',//sex默认值为未知
			age:"未知" //age默认值为未知
		}
	// 渲染组件到页面
	ReactDOM.render(<Person name="史迪奇" age="未知" sex="未知"/>,document.getElementById('test1'))
</script>
</body>

refs

字符串写法不建议用

<body>
	<script type="text/babel">
		//创建组件
		class Demo extends React.Component{
			// 展示左侧输入框的数据
			showData = ()=>{
				const {input1} = this.refs
				alert(input1.value)
			}
			// 展示右侧输入框的数据
			showData2 = ()=>{
				const {input2} = this.refs
				alert(input2.value)
			}
			render(){
				return(
					<div>
						<input ref="input1" type="text" placeholder="点击按钮提示数据"/>&nbsp;
						<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
						<input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
					</div>
				)
			}
		}
		// 渲染组件到页面
		ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))
	</script>
</body>

字符串写法效果

回调函数的ref

解释: 定义但没调用

特点

定义

调2用

执行

<body>
	<script type="text/babel">
		// 创建组件
		class Demo extends React.Component{
			// 展示左侧输入框的数据
			showData = ()=>{
				const {input1} = this
				alert(input1.value)
			}
			// 展示右侧输入框的数据
			showData2 = ()=>{
				const {input2} = this
				alert(input2.value)
			}
			render(){
				return(
					<div>
						{/*  cref={c => this.input1 = c }是回调函数 剩下的交给React 仅ref  */} 
						<input ref={c => this.input1 = c } type="text" placeholder="点击按钮提示数据"/>&nbsp;
						<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
						<input onBlur={this.showData2} ref={c => this.input2 = c } type="text" placeholder="失去焦点提示数据"/>&nbsp;
					</div>
				)
			}
		}
		//渲染组件到页面
		ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))
	</script>
</body>

回调函数效果

回调ref函数执行次数

<body>
	<script type="text/babel">
		//创建组件
		class Demo extends React.Component{

			state = {isPai:false}

			showInfo = ()=>{
				const {input1} = this
				alert(input1.value)
			}

			changeWeather = ()=>{
				//获取原来的状态
				const {isPai} = this.state
				//更新状态
				this.setState({isPai:!isPai})
			}

			saveInput = (c)=>{
				this.input1 = c;
				console.log('@',c);
			}

			render(){
				const {isPai} = this.state
				return(
					<div>
						<h2>派大星是{isPai ? '大聪明':'骚话王'}</h2>
						{/*<input ref={(c)=>{this.input1 = c;console.log('@',c);}} type="text"/><br/><br/>*/}
						<input ref={this.saveInput} type="text"/><br/><br/>
						<button onClick={this.showInfo}>点我提示输入的数据</button>
						<button onClick={this.changeWeather}>点击切换头衔</button>
					</div>
				)
			}
		}
		//渲染组件到页面
		ReactDOM.render(<Demo/>,document.getElementById('test'))
	</script>
</body>

回调ref函数执行次数

createRef的使用

createRef的官方推荐, alert(this.sDq.current.value) 用几个就要保证上方的 sDq = React.createRef() 就是需要创建的几个Ref的容器

<body>
<script type="text/babel">
		// 创建组件
		class Demo extends React.Component{
			/* 
				React.createRef调用后可以返回一个容器, 该容器可以存储被ref所标识的节点,该容器是"专人专用"的
			 */
			sDq = React.createRef()
			sDz = React.createRef()
			//展示左侧输入框的数据
			showData = ()=>{
				alert(this.sDq.current.value);
			}
			//展示右侧输入框的数据
			showData2 = ()=>{
				alert(this.sDz.current.value);
			}
			render(){
				return(
					<div>
						<input ref={this.sDq} type="text" placeholder="点击按钮提示数据"/>&nbsp;
						{/* 点击焦点 onClick */}
						<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
						{/* 失去焦点onBlur */}
						<input onBlur={this.showData2} ref={this.sDz} type="text" placeholder="失去焦点提示数据"/>&nbsp;
					</div>
				)
			}
		}
		// 渲染组件到页面
		ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))
	</script>
</body>

回调ref函数执行次数

作者: 我叫史迪奇
本文来自于: https://sdq3.link/React-state-props-refs.html博客内容遵循署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

React 组件实例的三大属性

props基本使用

批量传递props / 批量传递标签属性

展开运算符

限制

构造器能省略尽量省略

函数式组件使用props

函数式组件也可以进行限制

refs

字符串写法 不建议用

回调函数的ref

回调ref函数执行次数

createRef的使用

字符串写法不建议用