React：组件的状态和属性_状态值一个组件在不同时间点所呈现什么等属性的变化-CSDN博客

本文链接：https://blog.csdn.net/tang1392/article/details/78922933

ES6中react的属性和状态---https://babeljs.io/blog/2015/06/07/react-on-es6-plus

组件把状态与结果一一对应起来，组件中有state与prop（状态与属性）。

1、属性是由父组件传递给子组件的

2、状态是子组件内部维护的数据，当状态发生变化的同时，组件也会进行更新。当状态发生转换时会触发不同的钩子函数，从而让开发者有机会做出相应。

属性（statics）

statics 对象允许你定义静态的方法，这些静态的方法可以在组件类上调用。

定义组件的属性类型和默认属性

统一使用static成员来实现：

class Hi extends React.Component {
	static defaultProps = {
    autoPlay: false,
    maxLoops: 10,
  };  // 注意这里有分号
  static propTypes = {
  	autoPlay: React.PropTypes.bool.isRequired,
    maxLoops: React.PropTypes.number.isRequired,
    posterFrameSrc: React.PropTypes.string.isRequired,
    videoSrc: React.PropTypes.string.isRequired,
  };
  render() {
    return (
      <header>
      	<h3>{this.props.name}</h3>
      </header>
    );
  }
}

初始化state

class Hi extends React.Component {
	constructor(props){
    super(props);
    this.state = {
      loopsRemaining: this.props.maxLoops,
    };
 	}
  render() {
    return (
      <header>
      	<h3>{this.props.name}</h3>
      </header>
    );
  }
}

把方法作为回调提供并使用

//ES5
var PostInfo = React.createClass({
    handleOptionsButtonClick: function(e) {
        // Here, 'this' refers to the component instance.
        this.setState({showOptionsModal: true});
    },
    render: function(){
        return (
            <TouchableHighlight onPress={this.handleOptionsButtonClick}>
                <Text>{this.props.label}</Text>
            </TouchableHighlight>
        )
    },
});

ES6下，需要通过bind来绑定this引用，或者使用箭头函数（它会绑定当前scope的this引用）来调用：

//ES6
class PostInfo extends React.Component
{
    handleOptionsButtonClick(e){
        this.setState({showOptionsModal: true});
    }
    render(){
        return (
            <TouchableHighlight 
                onPress={this.handleOptionsButtonClick.bind(this)}
                onPress={e=>this.handleOptionsButtonClick(e)}
                >
                <Text>{this.props.label}</Text>
            </TouchableHighlight>
        )
    },
}

// 正确的做法
class PauseMenu extends React.Component{
    constructor(props){
        super(props);
        this._onAppPaused = this.onAppPaused.bind(this);//注意这里
    }
    componentWillMount(){
        AppStateIOS.addEventListener('change', this._onAppPaused); //还有这里
    }
    componentDidUnmount(){
        AppStateIOS.removeEventListener('change', this._onAppPaused);
    }
    onAppPaused(event){
    }
}

Mixins

但React官方已经不再打算在ES6里继续推行Mixin,官方推荐，对于库编写者而言，应尽快放弃Mixin的编写方式，推荐一种新的编码方式：

//Enhance.js
import { Component } from "React";

export var Enhance = ComposedComponent => class extends Component {
    constructor() {
        this.state = { data: null };
    }
    componentDidMount() {
        this.setState({ data: 'Hello' });
    }
    render() {
        return <ComposedComponent {...this.props} data={this.state.data} />;
    }
};
//HigherOrderComponent.js
import { Enhance } from "./Enhance";

class MyComponent {
    render() {
        if (!this.data) return <div>Waiting...</div>;
        return <div>{this.data}</div>;
    }
}

export default Enhance(MyComponent); // Enhanced component

解构与属性延展

class AutoloadingPostsGrid extends React.Component {
    render() {
        var {
            className,
            ...others,  // contains all properties of this.props except for className
        } = this.props;
        return (
            <div className={className}>
                <PostsGrid {...others} />
                <button onClick={this.handleLoadMoreClick}>Load more</button>
            </div>
        );
    }
}

状态（state）

state工作原理

常用的通知 React 数据变化的方法是调用 setState(data, callback)。这个方法会合并（merge） data 到 this.state，并重新渲染组件。渲染完成后，调用可选的 callback 回调。大部分情况下不需要提供 callback，因为只要组件的状态改变了，React 调用render（）负责把界面更新到最新状态。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.js"></script>
    <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script>
    <script type="text/jsx">
        //子组件
        var Content=React.createClass({
            getInitialState:function(){
                return {
                    //由于这里不会更新，所以我们下拉选人的时候，控制台没有报，我们修改一下
                    //text: "replay To:"+this.props.selectName,
                    inputText:"",
                };
            },
            handleChange:function(){
                this.setState({inputText:event.target.value});
            },
            handleSubmit:function(){
                //把计算的部分放到我们要用到的地方，要不输出的时候，不是我们最新的。
                console.log("replay To: "+this.props.selectName+ "\n" + this.state.inputText);
            },
            render:function(){
                return <div>
                <textarea onChange={this.handleChange} placeholder="请输入..."></textarea>
                <button onClick={this.handleSubmit}>submit</button>
                </div>
            },
        });
        //父组件
        var Comment = React.createClass({
            getInitialState:function(){
                return {
                    names:["Tim","John","Hank"],
                    selectName:'',
                };
            },
            handleSelect:function(event){
                this.setState({selectName:event.target.value});
            },
            render:function(){
                var options=[];
                for(var option in this.state.names){
                    options.push(<option value={this.state.names[option]}>{this.state.names[option]}</option>)
                };
                return <div>
                <select onChange={this.handleSelect}>
                    {options}
                </select>
                <Content selectName={this.state.selectName}></Content>
                </div>
            },
        });
        React.render(<Comment></Comment>,document.body);
    </script>
</body>
</html>

ES6中hi.js：

import React, { Component } from 'react';
import '../css/hi.css';

class Hi extends React.Component {
	constructor(){
    super();
    this.handleChange=this.handleChange.bind(this);
    this.state={
      value: "",
      msg: ""
    }
  }
  handleChange(e){
    this.setState({
      value: e.target.value,
      msg: e.target.value
    });
  }
  render() {
    return (
      <div>
      	<h3>
      		{this.props.name}
      	</h3>
      	<input type="text"  onChange={this.handleChange} value={this.state.value}/>
        <div>输入的是:{this.state.msg}</div>	
      </div>
    );
  }
}
export default Hi;