context

在React中,数据总是自上而下的传递,每当你使用一个组件的时候,你可以看到组件的props属性会自上而下的传递。 但是如果一个页面结构非常复杂,你在在某一种子组件获得其祖先组件的某个属性来干某事时,就非常麻烦了。虽然在React内部存在一个叫 _hostParent的属性,类似于DOM的parentNode来让你回溯其祖先,但毕竟是没有记录在文档上的内部属性,不适宜使用它。 于是到context出场了。

在官方React中,context一般与getChildContext,childContextTypes一起使用。在anu中,所有数据验证的东西已经干掉, 因此只要用context、getChildContext就行了。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">

    <script src='./dist/React.js'></script>
    <script src="./libs/babel.js"></script>
    <script type='text/babel'>

        class Parent extends React.Component{

            render() {
               return (<div className="parent"><Son /></div>)
            }
        }
       class Son extends React.Component{

            render() {
               return (<div className="son"> {this.context.value} </div>)
            }
        }

       class App extends React.Component{
            getChildContext() {
                return {
                    value: 666
                };
            }
            render() {
               return (<div className='app'><Parent /></div>)
            }
        };


        window.onload = function() {
            ReactDOM.render(<App />, document.getElementById('example'));
        }
    </script>
</head>

<body>
    <div id='example'>这个默认会被清掉</div>
</body>

</html>

React的context和全局变量相似,应避免使用,场景包括:传递登录信息、当前语音以及主题信息;

如果只传递一些功能模块数据,则尽量不要使用context,使用props传递数据会更加清晰;

使用context会使组件的复用性降低,因为这些组件依赖'上下文',当你在别的地方渲染的时候,可能会出现差异;

Copyright © 司徒正美 2013-2016 all right reserved,powered by Gitbook该文件修订时间: 2017-08-29 13:16:09

results matching ""

    No results matching ""