react context

首先创建4个函数，f1(),f2(),f3(),f4()

function f1() {
  console.log('f1')
}

function f2() {
  console.log('f2')
}

function f3() {
  console.log('f3')
}

function f4() {
  console.log('f4')
}
f1() 
console.log('have done')

然后我们在f1中调用f2, f2中调用f3，f3中调用f4

function f1() {
  console.log('f1')
  f2()
}

function f2() {
  console.log('f2')
  f3()
}

function f3() {
  console.log('f3')
  f4()
}

此时我们可以看到f1,f2,f3,f4逐层调用了。<br /> image.png

我们来创个update函数，然后随一个object传递给F4,这样F4就可以更新值了

function F3() {
  return (
    <div className="bordered">
      333,
      <nContext.Consumer>
        {value => <F4 num={value.num} update={value.update} />}
      </nContext.Consumer>
    </div>
  );
}
function F4(props) {
  return (
    <div className="bordered">
      444,{props.num}
      <button onClick={props.update}>click</button>
    </div>
  );
}
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      num: 100
    };
  }
  updateNum = () => {
    this.setState({
      num: 200
    });
  };
  render() {
    const { num } = this.state;
    let value = {
      num,
      update: this.updateNum
    };
    return (
      <div className="App">
        <nContext.Provider value={value}>
          <F1 />
        </nContext.Provider>
      </div>
    );
  }
}

此时，点击F4中的button,可以看到num变为200了<br />

image.png