state
理解:
state是组件对象最重要的属性,值是对象 组件被成为“状态机”,通过更新组件的state来更新对应页面的显示
tips
- 组件render方法中的this为组件实例对象
- 组件自定义方法中的this值为undefined(由于React组件开启严格模式)
解决方案:
- 2.1强制绑定this:在constructor中通过bind绑定
class MyComponent extends React.Component {
constructor(props){
super(props)
// 初始化state
this.state = { isToggle: true }
// bind强制绑定 为了在回调中使用this
this.handleClick = this.handleClick.bind(this)
}
handleClick() {
// TODO...
}
}
- 2.2箭头函数
// 2.1中代码简写,不写constructor
class MyComponent extends React.Component {
// state直接赋值
state = { isToggle: true }
// 箭头函数的this指向上一层
handleClick = () => {
// TODO
}
}
- 不能直接修改state,需要借助API:setState
props
用于存放组件中所有标签的属性
作用:通过标签属性从组件外向组件内传递变化的数据
Tips:组件内部不要修改props数据
类型限制与必要限制
class MyComponent extends React.Component {
static propTypes: {
name: PropTypes.string.isRequired, // 设置name属性为字符串且必须传
age: PropTypes.number,
speack: PropTypes.func
}
// 设置默认属性以及默认值
static defaultProps = {
name: 'Tom',
age: 18
}
render() {
// 解构获取props中的属性
const {name,age,sex} = this.props
return ({/*...*/})
}
}
refs
作用:组件内的标签定义ref来标识自己
三种方式:
// 1.字符串形式定义,获取方式:this.refs.input1
<input ref="input1" />
// 2.回调形式
// 2.1内联回调,通过this.input2获取
//(内联回调会出发两次)因为在每次渲染时会创建一个新的函数实例,React清空旧的ref并设置新的
// 解决方法:通过2.2class绑定
<input ref={(c) => this.input2 = c} />
// 2.2class绑定回调
setInput2Ref = (c) => {
this.input2 = c
}
<input ref={this.setInput2Ref} />
// 3.React.createRef()创建,通过this.myRef.current获取
this.myRef = React.createRef()
<input ref={this.myRef} />