一、前言
二、主要内容
1、认识：
1）state是组件对象中最重要的属性，值是一个对象(可以包含多个数组，有点像vue中的data属性)
2）组件被称为“状态机”，通过更新组件的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
})
3、案例演示
需求： 点击组件，让其中的文字发生变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="obj"></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">
//自定义Like组件
class Like extends React.Component{
//定义初始化状态
constructor(props){
super(props) //交给父类去执行
this.state={ //定义state属性，并添加一个isLikeMe数据
isLikeMe:false
}
//强制绑定，让函数handleClick等于当前组件
this.handleClick= this.handleClick.bind(this)
}
//定义操作函数，注意函数里面的this是undefined
handleClick(){
//更新state状态
const isLikeMe = !this.state.isLikeMe
this.setState({
isLikeMe
})
}
render(){
//读取状态
const {isLikeMe} = this.state
return <h1 onClick={this.handleClick}>{isLikeMe ? '我喜欢你':'你喜欢我'}</h1>
}
}
//渲染
ReactDOM.render(<Like />, document.getElementById('obj'))
</script>
</body>
</html>
4、注意点：
1.更新state状态定义的函数里面的this不是指向当前对象的，需要用bind强制绑定this为当前组件
2.强制绑定this: this.handleClick= this.handleClick.bind(this)
1、理解：
1）每个组件对象都会有props(properties的简写)属性
2）组件标签中所有的属性都保存在props中
2、作用：
1）通过标签属性从组件外向组件内传递变化的数据
2）组件内部不需要修改props数据
3、props的操作：
//1）内部读取某个属性值
this.props.propertyName
//2) 对props中的属性值进行类型限制和必要性限制
方法一：新版本中已经被弃用
Person组件名：
Person.propTypes={
name: React.PropTypes.string.isRequired,
age:React.PropTypes.number.isRequired
}
方法二：
需要用到prop-types.js文件
Person.propTypes={
name:PropTypes.string.isRequired
}
//3）扩展属性：对象的所有属性通过props传递
<Person {...person} /> //默认传递了所有属性
//4)默认属性值
Person.defaultProps = {
name:"Mary"
}
//5)组件类的构造函数，
constructor(props){
super(props)
console.log(props)//里面存放所有属性
}
4、举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="ul"></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">
function List(props){
return (
<ul>
<li>姓名：{props.name}</li>
<li>年龄: {props.age}</li>
<li>性别:{props.sex}</li>
</ul>
)
}
const person ={
name:'xxm',
age:18,
sex:'女'
}
//设置默认属性
List.defaultProps={
age:55,
sex:"男"
}
//对类型进行限制和必要性限制
List.propTypes={
name:PropTypes.string.isRequired
}
//使用扩展属性
ReactDOM.render(<List {...person}/>, document.getElementById('ul'))
</script>
</body>
</html>
1、理解：
1）组件内的标签都可以定义ref属性来标识自己
2）在组件中可以通过this.msgInput来得到真实的DOM元素
3）作用：通过ref获取到组件特定的标签对象，进行读取相关数据
//ref使用方式一：
<input type="text" ref="content"/>
//ref使用方式二：
<input type="text" ref={input=>this.input=input}/>
//input=>this.input=input 的含义是将当前的input 赋值给组件里面的input
2、事件处理
1）通过onXxx属性指定组件的事件处理函数
2）React中的事件是通过事件委托方式处理的（委托给组件最外层的元素）
3）通过event.target可以得到发生事件的DOM元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="obj1"></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
this.handleClick=this.handleClick.bind(this)
this.handleBlur = this.handleBlur.bind(this)
}
handleClick(){
alert(this.input.value)
}
handleBlur(event){
alert(event.target.value)
}
render(){
return (
<div>
<input type="text" ref="content"/>
<input type="text" ref={input=>this.input=input}/>
<button onClick={this.handleClick}>点击按钮</button>
<input type="text" placeholder="请输入数据" onBlur={this.handleBlur} />
</div>
)
}
}
ReactDOM.render(<MyComponent />, document.getElementById("obj1"))
</script>
</body>
</html>
三、总结
- React中props和state都是存储数据的区别如下
1）state: 组件自身内部可变化的数据
2）props: 从组件外部向组件内部传递数据，组件内部只读取不修改
- 注意点：
1）组件内置的方法中的this为组件对象，z
2) 在组件类中自定义的处理函数方法的this默认为null 所以需要强制绑定