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

你可能感兴趣的:(JavaScript,学习笔记,React,前端,reactjs,javascript,es6)