对react进行研究----入门

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list"><h1>Shopping List for {this.props.name}</h1><ul><li>Instagram</li><li>WhatsApp</li><li>Oculus</li></ul></div>
    );
  }
}
其中，ShoppingList 是一个 React 组件类，或者说是一个 React 组件类型。一个组件接收一些参数，我们把这些参数叫做 props（“props” 是 “properties” 简写），然后通过 render 方法返回需要展示在屏幕上的视图的层次结构。

​​render​​ 方法的返回值描述了你希望在屏幕上看到的内容。React 根据描述，然后把结果展示出来。更具体地来说，​​render​​​ 返回了一个 React 元素，这是一种对渲染内容的轻量级描述。大多数的 React 开发者使用了一种名为 “JSX” 的特殊语法，JSX 可以让你更轻松地书写这些结构。语法 ​​<div />​​​ 会被编译成 ​​React.createElement('div')​​。上述的代码等同于：

return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h1', /* ... h1 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);

在 Board 组件的 ​​renderSquare​​​ 方法中，我们将代码改写成下面这样，传递一个名为 ​​value​​ 的 prop 到 Square 当中：

class Board extends React.Component {
  renderSquare(i) {
return <Square value={i} />;
  }
}

class Square extends React.Component {
  render() {
    return (
      <button className="square">{this.props.value}</button>
    );
  }
}

在 React 应用中，数据通过 props 的传递，从父组件流向子组件。

class Square extends React.Component {
  render() {
    return (
<button className="square" onClick={function() { alert('click'); }}>{this.props.value}</button>
    );
  }
}

class Square extends React.Component {

render() {
   return (
<button className="square" onClick={() => alert('click')}>{this.props.value}</button>
   );
 }
}

class Square extends React.Component {
constructor(props) {
super(props);
this.state = {
: null,
};
}

  render() {
    return (
      <button className="square" onClick={() => alert('click')}>{this.props.value}</button>
    );
  }
}

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }

  render() {
    return (
      <button
className="square"
onClick={() => this.setState({value: 'X'})}
      >{this.state.value}</button>
    );
  }
}

在 Square 组件 ​​render​​​ 方法中的 ​​onClick​​​ 事件监听函数中调用 ​​this.setState​​​，我们就可以在每次 ​​<button>​​​ 被点击的时候通知 React 去重新渲染 Square 组件。组件更新之后，Square 组件的 ​​this.state.value​​​ 的值会变为 ​​'X'​​​，因此，我们在游戏棋盘上就能看见 ​​X​​​ 了。点击任意一个方格，​​X​​ 就会出现了。

每次在组件中调用 ​​setState​​ 时，React 都会自动更新其子组件。