react05

复合组件：父组件嵌套子组件

传递信息的方式

1. 父组件需要把信息传递给子组件
   “属性传递”：调取子组件的时候，把信息基于属性的方式传递给子组件（子组件PROPS中存储传递的信息）;这种方式只能父组件把信息传递子组件，子组件无法直接的把信息传递给父组件，也就是属性传递信息是单向传递的；

   export default class Vote extends React.Component {
       render() {
           let {title, count} = this.props;
           return <section className={'panel panel-default'} style={{width: '50%', margin: '20px auto'}}>
               <VoteHead title={title}/>
               ...
           </section>;
       }
   }

   上下文传递

   父组件先把需要给后代元素（包括孙子元素）使用的信息都设置好（设置在上下文中），后代组件需要用到父组件中的信息，主动去父组件中调取使用即可

       /*
        * 在父组件中
        *   需要安装:prop-types
        *
        *   1. 设置子组件上下文属性值类型
        *      static childContextTypes = {};
        *
        *   2. 获取子组件的上下文（设置子组件的上下文属性信息）
        *      getChildContext(){return {}}
        */
        //=>父组件设置信息
        static childContextTypes = {
            //=>设置上下文中信息值的类型
            n: PropTypes.number,
            m: PropTypes.number
        };
        getChildContext() {
            //->RETURN的是啥，相当相当于往上下文中放了啥
            let {count: {n = 0, m = 0}} = this.props;
            return {
                n,
                m
            };
        }
   --------------------------------------------------------------------------
        //=>子组件主动获取需要的信息
        static contextTypes = {
            //=>首先类型需要和设置时候类型一样，否则报错；并且你需要用啥，就写啥即可；
            n: PropTypes.number,
            m: PropTypes.number
        };
       constructor(props, context) {
           super(props, context);
       }
       render(){
           let {m,n} = this.context;
       }

`
属性 VS 上下文

1. 属性操作起来简单，子组件是被动接收传递的值（组件内的属性是只读的），只能父传子（子传父不行，父传孙也需要处理：父传子，子再传孙）；
2. 上下文操作起来相对复杂一些，子组件是主动获取信息使用的（子组件是可以修改获取到的上下文信息的，但是不会影响到父组件中的信息，其它组件不受影响）,一旦父组件设置了上下文信息，它后代组件都可以直接拿来用，不需要一层层的传递；

其实子组件也能修改父组件中的信息

利用回调函数机制：父组件把一个函数通过属性或者上下文的方式传递给子组件，子组件中只要把这个方法执行即可（也就是子组件中执行了父组件方法，还可以传递一些值过去），这样父组件在这个方法中，想把自己的信息改成啥就改成啥

平行组件

兄弟组件或者毫无关系的两个组件

• 方案一：让两个平行组件拥一个共同的父组件
  父：Parent
  子：A / B
  父组件中有一些信息，父组件把一个方法传递给A，A中把方法执行（方法执行修改父组件信息值），父组件再把最新的信息传递给B即可，等价于A操作，影响了B

• 方案二：基于REDUX来进行状态管理，实现组件之间的信息传输（常用方案）
  REDUX可以应用在任何的项目中（VUE/JQ/RERACT的都可以），REACT-REDUX才是专门给REACT项目提供的方案