学习react （fiveday）

列表：

• 来看一组对比例子，JS和JSX的对比

//js实现把一个数组中的每一项变两倍，并且打印
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled);
//在JSX中
function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

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

小结：在JSX中，当你创建一个元素的时候，必须包含一个特殊的key属性， key 帮助 React 识别哪些元素改变了，比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。 同vue中v-for中的：key差不多，元素key要放在就近数组的上下文，就是在那里循环放哪里，key在兄弟节点上唯一，但不是全局唯一，这个应该和 tree diff 有关

• 在JSX中嵌入map

function NumberList(props) {
  const numbers = props.numbers;
  return (
    <ul>
      {numbers.map((number) =>
        <ListItem key={number.toString()}
                  value={number*2} />
      )}
    </ul>
  );
}
//展示的结果是2，4,6,8,10

处理多个输入

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.name === 'isGoing' ? target.checked : target.value;
    const name = target.name;

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

  render() {
    return (
      <form>
        <label>
          参与:
          <input
            name="isGoing"
            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          来宾人数:
          <input
            name="numberOfGuests"
            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange} />
        </label>
      </form>
    );
  }
}

小结：主要通过name不同，然后触发相同的事件处理函数，然后通过事件对象的name属性判断出是哪一个对象触发的事件，然后做对应的处理

受控组件与非受控组件（待探讨）