React组件三大核心属性state props refs

state

理解：

state是组件对象最重要的属性，值是对象 组件被成为“状态机”，通过更新组件的state来更新对应页面的显示

tips

1. 组件render方法中的this为组件实例对象
2. 组件自定义方法中的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
	}
}

3. 不能直接修改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} />