首页 » 记事本 » React组件数据共享

React组件数据共享

众所周知React是单向数据流动的框架,数据可以通过props一层一层的传下去。但是如果传递组件与目标组件层级相差太多,就会多出很多不必要的props传递过程。

针对此种问题,React提供了”context” API。

class Button extends React.Component {
    render() {
        return (
            <button style={{background: this.props.color}}>{this.props.children}</button>
        );
    }
}

class Message extends React.Component {
    render() {
        return (
            <div>
                {this.props.text} <Button color={this.props.color}>Delete</Button>
            </div>
        );
    }
}

class MessageList extends React.Component {
    render() {
        const color = "purple";
        const children = this.props.messages.map((message) =>
            <Message text={message.text} color={color} />
        );
        return <div>{children}</div>;
    }
}

在这个示例中,我们通过一个color prop给ButtonMessage组件设置style。使用context,我们能自动在组件树中传递信息:

var Button = React.createClass({
    contextTypes: {
        color: React.PropTypes.string
    },
    render: function () {
        return (
            <button style={{background: this.context.color}}>{this.props.children}</button>
        );
    }
});

var Message = React.createClass({
    render: function () {
        return (
            <div>
                {this.props.text} <Button>Delete</Button>
            </div>
        );
    }
});

var MessageList = React.createClass({
    childContextTypes: {
        color: React.PropTypes.string
    },
    getChildContext: function () {
        return {color: "purple"};
    },
    render: function () {
        var children = this.props.messages.map(function (message) {
            return <Message text={message.text}/>;
        });
        return <div>{children}</div>;
    }
});

通过添加childContextTypesgetChildContext到 MessageList(context提供者),React会自动下传信息,并且通过定义contextTypes,子树中的任何组件(在这个例子中,子组件是Button)可以访问context。

如果contextTypes没有定义,那么context将是一个空对象。

在无状态功能组件中引用context

const Button = ({children}, context) =>
    <button style={{background: context.color}}>
        {children}
    </button>;

Button.contextTypes = {color: React.PropTypes.string};

React.withContext 已从React 0.13-alpha中弃用

React.withContext会执行一个指定的上下文信息的回调函数,任何在这个回调函数里面渲染的组件都有这个context的访问权限

var A = React.createClass({
    contextTypes: {
        name: React.PropTypes.string.isRequired,
    },
    render: function() {
        return <div>My name is: {this.context.name}</div>;
    }
});

React.withContext({'name': 'Jonas'}, function () {
    // Outputs: "My name is: Jonas"
    React.render(<A />, document.body);
});

react-redux正是借助Context API实现组件共享store

慎用Context

绝大多数应用程序不需要使用慎用Context

Context是一个先进的实验性API,这个API很可能在未来版本变化,如果你希望构建稳定的应用程序就不要使用他。

此文章发表在 记事本. 将 固定链接 加入收藏.