版权声明：Dream_Lees Blog https://blog.csdn.net/qq_41846861/article/details/86584146
1.state
理解
1)state是组件对象最重要的属性, 值是对象(可以包含多个数据)
2)组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)
编码操作
1)初始化状态:
constructor (props) {
super(props)
this.state = {
stateProp1 : value1,
stateProp2 : value2
}
}
2)读取某个状态值
this.state.statePropertyName
3)更新状态---->组件界面更新
this.setState({
stateProp1 : value1,
stateProp2 : value2
})
源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>07_component_state</title>
</head>
<body>
<div id="example"></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">
/*
需求: 自定义组件, 功能说明如下
1. 显示h2标题, 初始文本为: 你喜欢我
2. 点击标题更新为: 我喜欢你
*/
//定义组件
class Like extends React.Component{
constructor(props){
super(props)
//初始化状态
this.state = {
isLikeMe: false
}
//将新曾方法中this强制绑定为组件对象
this.handleClick = this.handleClick.bind(this)
}
//新添加方法：内部this默认不是组件对象
handleClick (){
//获取状态并取反
console.log(this)
const isLikeMe = !this.state.isLikeMe
//更新状态 传对象
this.setState({
isLikeMe //中括号内本应是isLikeMe:isLikeMe 前后一样 可省略
})
}
//重写组件类方法
render (){
//读取状态
//const isLikeMe = this.state.isLikeMe 等同下
const {isLikeMe} = this.state
//绑定事件监听
return<h2 onClick={this.handleClick}>{isLikeMe?'你喜欢我':'我喜欢你'}</h2>
//或者下边绑定 但是效率低 要多次bind绑定this
// return<h2 onClick={this.handleClick.bind(this)}>{isLikeMe?'你喜欢我':'我喜欢你'}</h2>
}
}
//渲染组件标签
ReactDOM.render(<Like />,document.getElementById('example'))
</script>
</body>
</html>
效果:点击 我喜欢你 -->你喜欢我
2.props
效果
- 需求: 自定义用来显示一个人员信息的组件
1). 姓名必须指定
2). 如果性别没有指定, 默认为男
3). 如果年龄没有指定, 默认为18
理解
1)每个组件对象都会有props(properties的简写)属性
2)组件标签的所有属性都保存在props中
作用
1)通过标签属性从组件外向组件内传递变化的数据
2)注意: 组件内部不要修改props数据
编码操作
1)内部读取某个属性值
this.props.propertyName
2)对props中的属性值进行类型限制和必要性限制
Person.propTypes = {
name: React.PropTypes.string.isRequired,
age: React.PropTypes.number.isRequired
}
3)扩展属性: 将对象的所有属性通过props传递
<Person {...person}/>
4)默认属性值
Person.defaultProps = {
name: 'Mary'
}
5)组件类的构造函数
constructor (props) {
super(props)
console.log(props) // 查看所有属性
}
源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>04_component_props</title>
</head>
<body>
<div id="example1"></div>
<div id="example2"></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/javascript" src="../js/prop-types.js"></script>
<script type="text/babel">
/*
需求: 自定义用来显示一个人员信息的组件, 效果如页面. 说明
1). 如果性别没有指定, 默认为男
2). 如果年龄没有指定, 默认为18*/
//定义组件
// function Person(props) {
// return(
// <ul>
// <li>姓名：{props.name}</li>
// <li>年龄：{props.age}</li>
// <li>性别：{props.sex}</li>
// </ul>
// )
// }
class Person extends React.Component{
render(){
console.log(this)
return(
<ul>
<li>姓名：{this.props.name}</li>
<li>年龄：{this.props.age}</li>
<li>性别：{this.props.sex}</li>
</ul>
)
}
}
//指定组件属性默认值
Person.defaultProps = {
sex:'男',
age: 18
}
//对props中属性进行类型限制和必要性限制
Person.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number
}
//渲染组件标签
const p1 = {
name:'Tom',
age: 18,
sex: '女'
}
console.log(p1.name)
//左侧属性名 要跟<li>标签里的对应
//ReactDOM.render(<Person name={p1.name} age={p1.age} sex={p1.sex}/>,document.getElementById('example1'))
/* ...作用
1.打包
function fn (...a) fn(1,2,3)
2.解包
const arr1=[1,2,3] const arr2 = [6,...arr1,99,78] 等同于arr2= [6,1,2,3,99,78]
*/
ReactDOM.render(<Person {...p1}/>,document.getElementById('example1'))
const p2 = {
name:'Jack',
}
console.log(p2.name)
ReactDOM.render(<Person name={p2.name} age={22}/>,document.getElementById('example2'))
</script>
</body>
</html>
效果
面试题
- 问题: 请区别一下组件的props和state属性
1)state: 组件自身内部可变化的数据
2)props: 从组件外部向组件内部传递数据, 组件内部只读不修改
3. refs与事件处理
效果
- 需求: 自定义组件, 功能说明如下:
2. 点击按钮, 提示第一个输入框中的值
3. 当第2个输入框失去焦点时, 提示这个输入框中的值
refs属性
1)组件内的标签都可以定义ref属性来标识自己
a.<input type=“text” ref={input => this.msgInput = input}/>
b.回调函数在组件初始化渲染完或卸载时自动调用
2)在组件中可以通过this.msgInput来得到对应的真实DOM元素
3)作用: 通过ref获取组件内容特定标签对象, 进行读取其相关数据
事件处理
1)通过onXxx属性指定组件的事件处理函数(注意大小写)
a.React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
b.React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
2)通过event.target得到发生事件的DOM元素对象
<input onFocus={this.handleClick}/>
handleFocus(event) {
event.target //返回input对象
}
强烈注意
1)组件内置的方法中的this为组件对象
2)在组件类中自定义的方法中this为null
- a.强制绑定this: 通过函数对象的bind()
b.箭头函数(ES6模块化编码时才能使用)
源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>07_component_refs</title>
</head>
<body>
<br>
<div id="example"></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">
/*
需求: 自定义组件, 功能说明如下:
1. 界面如果页面所示
2. 点击按钮, 提示第一个输入框中的值
3. 当第2个输入框失去焦点时, 提示这个输入框中的值
*/
//定义组件
class Lixiang extends React.Component{
constructor(props){
super(props)
this.state ={
}
this.showInput = this.showInput.bind(this)
}
//事件处理
handBlur (event){
alert(event.target.value)
}
showInput(){
const input = this.refs.content
// alert(input.value)
alert(this.input.value)
}
render(){
return (
<div>
<input type="text" ref="content"/>
<input type="text" ref={(input) => this.input = input}/>
<button onClick={this.showInput}>提示输入 </button>
<input type="text" placeholder="失去焦点提示内容" onBlur={this.handBlur}/>
</div>
)
}
}
//渲染组件你标签
ReactDOM.render(<Lixiang />,document.getElementById("example"))
</script>
</body>
</html>