事件处理

1、React事件绑定属性的命名采用驼峰式写法，而不是小写；
2、如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM元素的写法)；
3、在 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为。你必须明确的使用 e.preventDefault();
4、类的方法默认是不会绑定 this，没有在方法后面添加 ()，要为这个方法绑定 this，（构造函数中绑定，属性初始化器法， 箭头函数）， 箭头函数,如果这个回调函数作为一个属性值传入低阶组件，这些组件可能会进行额外的重新渲染。建议选用其他两种方法。
5、传参数：参数 e 作为 React 事件对象将会被作为第二个参数进行传递。通过箭头函数的方式，事件对象e必须显式的进行传递，但是通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。

class LoggingButton extends React.Component {
  // This syntax ensures `this` is bound within handleClick.
  // Warning: this is *experimental* syntax.
  handleClick = () => {//属性初始化器法绑定this
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}
class LoggingButton extends React.Component {
/*构造函数中绑定this
    constructor(props) {
        super(props);
        // This binding is necessary to make `this` work in the callback
        this.handleClick = this.handleClick.bind(this);
   }*/
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    // This syntax ensures `this` is bound within handleClick
    return (
      <button onClick={(e) => this.handleClick(e,id)}>{/*箭头函数方法，用构造函数中绑定this时可直接调用this.handleClick*/}
        Click me
      </button>
    );
  }
}

条件渲染

1、使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素 满足条件return元素；
2、声明一个变量用于存储元素，渲染组件得其中一部分元素；
3、与运算符 &&：用花括号包裹代码在 JSX 中嵌入任何表达式 ，也包括 JavaScript 的逻辑与 &&，JavaScript 中，true && exPression 总是返回 expression，而 false && expression 总是返回 false，如果条件是 true，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它；
4、三目运算符：condition ? true : false；
5、阻止组件渲染 ：render 方法返回 null，但是生命周期得方法依然可以回调；

function WarningBanner(props) {
  if (!props.warn) {
    return null;    //返回null不渲染元素
  }
 const a = <a>超链接</a>;//存储元素到变量
  if (props.warn == “a”) {//if条件句 return元素，tia'jian渲染
    return a;    
  }

  return (
    <div className="warning">
      Warning!
    </div>
  );
}

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showWarning: true}
    this.handleToggleClick = this.handleToggleClick.bind(this);
  }

  handleToggleClick() {
    this.setState(prevState => ({
      showWarning: !prevState.showWarning
    }));
  }

  render() {
    return (
      <div>
        <WarningBanner warn={this.state.showWarning} />
        <button onClick={this.handleToggleClick}>
          {this.state.showWarning ? 'Hide' : 'Show'}{/*三目运算符选择渲染文本*/}
        </button>
        {this.props.warn=="b" && <a>b超链接</a>} // &&条件渲染
      </div>
    );
  }
}

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

列表 & Keys

1、map()
2、当你创建一个元素时，必须包括一个特殊的 key 属性。key是唯一得标识,数据里面得id或索引index，key应该绑定在循环得组件上而不是DOM元素上key应该在数组的上下文中被指定；
3、两个不同的数组时，我们可以使用相同的键；
4、key会作为给React的提示，但不会传递给你的组件，传递给组件必须赋值在组件得属性上；
5、也可在JSX中使用Map();

function ListItem(props) {
  // 对啦！这里不需要指定key:
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 又对啦！key应该在数组的上下文中被指定
    <ListItem key={number.toString()}
              value={number} />

  );
  return (
    <ul>
      {listItems}
      {numbers.map((number)=>
          <ListItem value={number} key={index}/> 
      )
      }
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

表单

1、受控组件（<input>,<textarea>, <select>）：每个状态的改变都有一个与之相关的处理函数，使react变成一种单一数据源的状态，表单值为state的属性值，更改时调用事件更改state值。通过传入一个value属性来实现对组件的控制；
2、<textarea>：value属性来text内容；
3、select 标签：用value值代表选中的内容；
4、处理多个受控的input元素时，可以通过给每个元素添加一个name属性，来让处理函数根据 event.target.name的值来选择做什么。

class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isGoing: true,
      numberOfGuests: 2
    };

    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value; //判断type
    const name = target.name;  //根据target.name来设定值。

    this.setState({
      [name]: value
    });
  }

  render() {
    return (
      <form>
        <label>
          Is going:
          <input
            name="isGoing"
            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          Number of guests:
          <input
            name="numberOfGuests"
            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange} />
        </label>
      </form>
    );
  }
}

状态提升

1、 通过将state数据提升至离需要这些数据的组件最近的父组件来完成的。这就是所谓的状态提升;
2、让组件“受控”，让组件收一个一个属性值为父组件得函数名。可在组件内调用该函数，该函数使用setState()；
3、在React应用中，对应任何可变数据理应只有一个单一“数据源”。通常，状态都是首先添加在需要渲染数据的组件中。此时，如果另一个组件也需要这些数据，你可以将数据提升至离它们最近的父组件中。你应该在应用中保持 自上而下的数据流，而不是尝试在不同组件中同步状态。

组合 vs 继承

1、React 具有强大的组合模型，我们建议使用组合而不是继承来复用组件之间的代码；
2、包含关系：不知道子组件是什么（Sidebar 或 Dialog），children（this.props.children） 属性将子元素直接传递到输出,该组件包含的其他元素即为children属性得值，或者将元素赋值给组件得自定义属性；
3、特殊实例：通过配置属性用较特殊的组件来渲染较通用的组件；

function Dialog(props) {
  return (
    <fancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
      {props.children}
    </FancyBorder>
  );
}

class SignUpDialog extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleSignUp = this.handleSignUp.bind(this);
    this.state = {login: ''};
  }

  render() {
    return (
      <Dialog title="Mars Exploration Program"
              message="How should we refer to you?">
        <input value={this.state.login}
               onChange={this.handleChange} />

        <button onClick={this.handleSignUp}>
          Sign Me Up!
        </button>
      </Dialog>
    );
  }

  handleChange(e) {
    this.setState({login: e.target.value});
  }

  handleSignUp() {
    alert(`Welcome aboard, ${this.state.login}!`);
  }
}