React context

react 父组件传递数据给到子组件,一般是通过props,子组件也通过props传递给孙子组件,一层层自上而下传递。当面对层级比较多的时候,每一层都需要接收上一层传递的props,然后传递给下一层。这就很繁琐了。react context就是解决这一问题的。

react context会在全局创建一个共享值,谁需要用到该值就自己去取,不用组件树逐层传递。使用context要想好是否有必要,因为context会导致组件的复用性变低。具体的使用方法是:

1、使用 React.createContext创建一个context,该方法接收一个初始化值。

const ThemeContext = React.creatContext("light")

2、在父组件中定义一个值,传递给孙子组件。通过上面创建的context名加".provider"使用:

Class App extends React.Component{

        render() {

            return (

                

                    //中间组件名

                    

                

            )

       }

_

3、定义中间组件,此时中间组件不需要再承担传递props的职责了。

function Toolbar() {

        return (

            

                

            

        )

}

4、定义孙子组件,该组件需要使用到父组件传递过来的值。

class Themebutton extends React.Component {

        //定义contextType 为第一步创建的ThemeContext React会自动开始找provider的值并开始使用它         static contextType = ThemeContext;

        render () {

            return

你可能感兴趣的:(React context)