本系列博文从 Shadow Widget 作者的视角，解释该框架的设计要点。本篇讲解双源属性、不可变数据、事件驱动等。

1. React 中的隐式双源

var mainComp = null;

function Welcome(props) {
  return <h1>Hello,{props.name}</h1>;
}

class DivText extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name:'Wayne'};
    mainComp = this;
  }
  
  render() {
    return (
      <div key='main'>
        <Welcome key='txt' name={this.state.name} />
      </div>
    );
  }
}

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

setTimeout( function() {
  mainComp.setState({name:'George'});
},5000);

这个例子创建的 component 树如下图，main@H_502_12@ 节点的 state.name@H_502_12@ 传递给 txt@H_502_12@ 节点用作 props.name@H_502_12@。txt@H_502_12@ 节点初始显示 "Hello,Wayne"@H_502_12@，过 5 秒后切换为 "Hello,George"@H_502_12@。

<root node>
  +-- main      // div
  |   +-- txt   // h1

render() {
    return (
      <div key='main'>
        <Welcome key='txt' name={this.state.name} />
      </div>
    );
  }

var txtComp = null;

class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name:props.name};
    this.oldName = props.name;
    txtComp = this;
  }

  render() {
    var name = this.state.name;
    if (this.oldName !== this.props.name)
      name = this.state.name = this.oldName = this.props.name;
    return <h1>Hello,{name}</h1>;
  }
}

class Welcome extends React.Component {
  constructor(props) {
    super(props);
  }
  
  setName(newName) {
    mainComp.setState({name:newName});
  }
  
  render() {
    return <h1>Hello,{this.props.name}</h1>;
  }
}

sourceComp.listen('attr',targetComp,'attrMethod');
  sourceComp.listen('attr',function(value,oldValue){});