ReactJS第三天

propTypes 检查组件的属性值是否符合要求

        var Test = React.createClass({
            PropTypes: {
                title: React.PropTypes.string.isRequired
            },
            render: function() {
                return (
                    <h1>{this.props.title}</h1>
                )
            }
        });
        var titleData = 111;
        ReactDOM.render(
            <Test title={titleData}></Test>,
            document.querySelector('#display')
        );

注意React.PropTypes是大写开头

ref 真实DOM

• React使用的是虚拟DOM的实现方式，即所有的DOM先在虚拟DOM中发生，再反应在真实的DOM上
• 在标签上使用ref="refName"属性，获取时使用this.refs.refName就可以拿到真实的DOM
• this.refs.refName需要在虚拟DOM插入到文档之后才能使用，否则会报错

state 状态机

• getInitialState用于初始化状态，这个对象可以通过this.state拿到，因此对象里的属性也可以通过this.state.属性名的方式获取到
• 通过this.setState()来修改状态值，每次修改之后，会自动调用this.render()方法再次渲染组件

state和props的区别

都用于描述组件的特性，this.props表示那些一旦定义，就不再改变的特性，而this.state是会随着用户互动而产生变化的特性。

表单与onChange、setState、event.target.value实现值同步

输入框实时输入的值，不能用 this.props.value 读取，而要定义一个 onChange 事件的回调函数，通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况

var MyInput = React.createClass({
            getInitialState: function() {
                return {
                    value: "input some words here"
                };
            },
            inputHandleChange: function(e) {
                this.setState({
                    value: e.target.value
                });
            },
            render: function() {
                return (    
                    <div>
                        <input type="text" value={this.state.value} onChange={this.inputHandleChange}/>
                        <h1>{this.state.value}</h1>
                    </div>
                );
            }
        });
        ReactDOM.render(
            <MyInput></MyInput>,
            document.querySelector('#display')
        );

生命周期

生命周期的三个状态

• Mounting 已挂载真实DOM
• Updating 正在重新渲染
• Unmounting 已卸载真实DOM

生命周期调用的方法：

• 初始化阶段：
  • getDefaultProps() 初始化属性
  • getInitialState() 初始化状态
  • componentWillMount() 准备挂载
  • render() 渲染
  • componentDidMount() 挂载完毕
• 运行阶段：
  • componentWillReceiveProps() 组件将接收到新属性
  • shouldComponentUpdate() 收到新属性或新状态判断是否重新渲染
  • componentWillUpdate() 准备重新渲染
  • render() 渲染
  • componentDidUpdate() 重新渲染完毕
• 销毁阶段：
  • componentWillUnmount() 准备卸载

组件样式

• 错误写法：

  style="opacity:{this.state.opacity};"

• 正确示范：

  style={{opacity: this.state.opacity}}