组件间通讯

1.父组件中放入子组件,将本身属性与要领传给子组件,子组件即父组件的一部分,所以只需父组件从新render,子组件也一定从新render.
2.子组件this.props吸收父组件传过来的属性与要领,this.props.add挪用父组件要领,this.setState为父组件中的state.

import React, { Component } from 'react';
import { render } from 'react-dom';
import Example from '../components/Example.js';

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            a: 1
        };
    }
    add = () => {
        this.setState({
            a: this.state.a + 1
        });
    }
    render() {
        return (
            <div>
                <div>
                    { this.state.a }
                    <Example a = { this.state.a } add={ this.add } />
                </div>
            </div>
        );
    }
}

render(<App />, document.getElementById('root'));

import React, { Component } from 'react';
import { render } from 'react-dom';

class Example extends Component {
    constructor(props) {
        super(props);
        this.state = {
            a: 10
        };
    }
    componentWillReceiveProps(nextProps) {
        this.setState({
            a: nextProps.a
        });
    }
    add = () => {
        this.setState({
            a: this.state.a + 1
        });
    }
    render() {
        return (
            <div>
                <p>父组件: { this.props.a }</p>
                <p>子组件: { this.state.a }</p>
                <button onClick={ this.add }>挪用子组件本身的add要领</button>
                <button onClick={ this.props.add }>挪用父组件add要领</button>
            </div>
        );
    }
}

export default Example;

父组件向子组件通讯

React数据活动是单向的,父组件向子组件的通讯也是最常见的体式格局.
父组件经由过程props向子组件通报须要的信息.

import React, { Component } from 'react';
import { render } from 'react-dom';
import ListTitle from '../components/ListTitle.js';
import ListItem from '../components/listItem.js';

class List extends Component {
    render() {
        let title = '父组件向子组件通讯';
        let list = [1, 2, 3, 4, 5];

        return (
            <div>
                <ListTitle title={ title } />
                <ul>
                    {
                        list.map((item, index) => {
                            return (
                                <ListItem key={ index } value={ item } />
                            )
                        })
                    }
                </ul>
            </div>
        );
    }
}

render(<List />, document.getElementById('root'));

子组件向父组件通讯

setState平常与回调函数均会成对涌现,这是由于回调函数等于转换内部状况时的函数传统.
子组件运用this.props.fun挪用父组件的函数,函数中平常会setState,触发父组件render,同时子组件也会render

    onItemChange = (item) => {
        const { list } = this.state;

        this.setState({
            list: list.map((prevItem) => {
                return {
                    text: prevItem.text,
                    checked: prevItem.text === item.text ? !prevItem.checked : prevItem.checked
                }
            })
        });
    }
    onTitleChange = () => {
        this.setState({
            title: '运用回掉函数,子组件向父组件通讯'
        })
    }

跨级组件通讯

当须要让子组件跨级接见信息时,我们能够像之前说的要领那样向更高级别的组件层层通报props.
在React中,我们能够运用context来完成跨级父子组件间的通讯.
我们并没有给ListItem通报props,而是在父组件定义了ChildContext,如许从这一层最先的子组件都能够拿到定义的context,比方这里的txt.
不过React官方并不发起大批运用context,由于它能够削减逐层通报,但当组件构造庞杂时,我们并不知道context是从那里传过来的.
Context就像一个全局变量一样,而全局变量恰是致使运用走向杂沓的罪魁祸首之一,给组件带来了外部依靠的副作用.
运用context比较好的场景是真正意义上的全局信息且不会变动,比方界面主题,用户信息等.
1.父组件

static childContextTypes = {
    txt: React.PropTypes.string
};
getChildContext() {
    return {
        txt: 'aaaa'
    };
}

2.子组件

static contextTypes = {
    txt: React.PropTypes.string
};
<span>span: { this.context.txt }</span>

没有嵌套关联的组件通讯

1.没有嵌套关联的,那只能经由过程能够影响全局的一些机制去斟酌,自定义事宜机制不失为一种上佳的要领.
2.在componentDidMount事宜中,假如组件完成挂载,再定阅事宜.
当组件卸载的时刻,在componentWillUnmount事宜中作废事宜的定阅.