对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 = {  value: 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 都会自动更新其子组件。