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

组件实例的三大核心属性：state

1. 理解

1. state 是组件对象最重要的属性，值是对象（可以包含多个key-value的组合）
2. 组件被称为“状态机”，通过更新组件的state来更新对应的页面显示（重新渲染组件）
3. 严重注意：状态不可以直接更改!
   正确写法:注意状态必须通过setState进行更新，且更新是一种合并，不是替换。
   this.setState({isHot:!isHot})
   

2. 强烈注意

1. 组件render方法中的this为组件实例对象
2. 组件自定义方法中的this为undefined，如何解决？
   a. 强制绑定this：通过函数对象的bind（）
   b. 箭头函数
3. 状态数据：不能直接修改或更新。

组件实例的三大核心属性：props

理解

1. 每个组件对象都会有props（properties的简写）属性
2. 组件标签的所有属性都保存在props中

作用

1. 通过标签属性从组建外向组件内传递变化的数据
2. 注意：组件内部不要修改props数据

编码操作

1. 内部赌气某个属性值

this.props.name

2. 对props中的属性值进行类型限制和必要性限制
   第一种方式（React v15.5开始已经弃用）

Person.propTypes={
name:React.ProTypes.string.isRequired,
age:React.ProTypes.number
}

第二种方式（新）
使用prop-types库进限制（需要引入prop-types库）

Person.propTypes={
name:PropTypes.string.isRequired,
age:PropTypes.number
}

3. 扩展属性：将对象所有属性通过props传递

<Person {...Person}/>

4. 默认属性值

Person.defaultProps={
age:19,
sex:'男'
}

5. 组件类的构造函数

constructor(props){
super(props)
console.log(props)
}

refs

何时使用Refs

下面是几个适合使用refs 的情况:

• 管理焦点，文本选择或媒体播放。·
• 触发强制动画。
• 集成第三方DOM库。

避免使用refs来做任何可以通过声明式实现来完成的事情。

举个例子，避免在 Dialog 组件里暴露open()和close()方法，最好传递isOpen属性。

勿过度使用Refs

你可能首先会想到使用refs在你的app中“让事情发生"。如果是这种情况，请花一点时间，认真再考虑一下state属性应该被安排在哪个组件层中。通常你会想明白，让更高的组件层级拥有这个state，是更恰当的。查看状态提升以获取更多有关示例。

  // 创建组件
        class Demo extends React.Component{
            // React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点，该容器是专人专用的
            myRef=React.createRef()
            myRef2=React.createRef()
            //展示左侧输入框的数据
            showData=()=>{
                alert(this.myRef.current.value);
            }
            //展示右侧输入框的数据
            showData2=()=>{
                alert(this.myRef2.current.value)
            }
            render(){
                return (
                    <div>
                    <input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>&nbsp;
                    <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
                    <input onBlur={this.showData2} ref={this.myRef2} type="text" placeholder="失去焦点提示数据"/>
                </div>
                )

            }
        }
        // 渲染组件到页面
        ReactDOM.render(<Demo/>,document.getElementById('test'))

注意：

1. 通过onXxx属性指定事件处理函数（注意大小写）
   a. React使用的是租定义（合成）事件，而不是使用的原生DOM事件----为了更好地兼容性.
   b. React中的事件是通过事件委托方式处理的（委托给组件最外层的元素）
2. 通过event.target得到发生事件的DOM元素对象。