react 学习1

React 是什么？

React 是一个采用声明式，高效而且灵活的用来构建用户界面的框架。

状态提升

当你遇到需要同时获取多个子组件数据，或者两个组件之间需要相互通讯的情况时，把子组件的 state 数据提升至其共同的父组件当中保存。之后父组件可以通过 props 将状态数据传递到子组件当中。

受控组件

子组件 不再拥有自身的状态数据了，从福罪案接受数据并将数据要改变的事件通知父组件改变状态数据，我们成为受控组件

在写组件的时候 尽量把组件写成无状态的受控组件  把数据放在父组件里 这样利于数据维护

但是这样就会牵扯到组件之间的相互通信，如果多个组件改变同一个数据的时候  就会相互影响，为了避免这样的影响，就需要 浅拷贝——不可变性

改变应用数据的方式一般分为两种。第一种是直接修改已有的变量的值。第二种则是将已有的变量替换为一个新的变量。

直接修改数据

var player = {score: 1, name: 'Jeff'};
player.score = 2;
// Now player is {score: 2, name: 'Jeff'}

替换修改数据

var player = {score: 1, name: 'Jeff'};

var newPlayer = Object.assign({}, player, {score: 2});
// Now player is unchanged, but newPlayer is {score: 2, name: 'Jeff'}

// 或者使用最新的对象分隔符语法，你可以这么写：
// var newPlayer = {...player, score: 2};

通过这样的方式，我们可以得到以下几点好处：

1.实现 撤销/重做 以及时间旅行。 因为不改变已有的数据  所以我们在需要的时候随时切换回历史数据

2.记录变化 每次我们都返回一个新的对象 所以要判断对想是否被替换 那么其中的数据肯定就改变了，检查到替换之后 就可以执行对应的操作

编写组件最好编写 纯组件 pure components  对于性能优化可以用  shouldComponentUpdate()

key 是 React 当中使用的一种特殊的属性（除此之外还有 ref 属性）。当元素被创建时，React 会将元素的 key 值和对应元素绑定存储起来。尽管 key 看起来像是 props 的一部分，可是事实上我们无法通过 this.props.key 获取到 key 的值。React 会自动的在判断元素更新时使用 key ，而组件自己是无法获取到 key 的。

当一个列表被重新渲染时，React 会根据较新的元素内容依据相应的 key 值来匹配之前的元素内容。当一个新的 key 值添加到列表当中时，表示有一个组件被创建；被删除时表示有一个组件被销毁。Key 值可以让 React 明确标识每个组件，这样它才能在每次重新渲染时保有对应的状态数据。假如你去改变某个组件的 key 值的话，它会在下次渲染时被销毁并当作新的组件重新渲染进来。

强烈建议你在渲染列表项时添加 keys 值。 假如你没有现成可以作为唯一 key 值的数据使用的话，你可能需要考虑重新组织设计你的数据了

根据官网写的游戏demo

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

// Square 组件代表一个单独的 <button>
class Square extends React.Component {
  constructor() {
    super();
    this.state = {
      value: null,
    }
  }
  render() {
    return (
      <button className="square" onClick={this.props.onClick}>
        {this.state.value || this.props.value}
      </button>
    );
  }
}


//Board 组件包含了9个squares
class Board extends React.Component {

  renderSquare(i) {
    return <Square value={this.props.squares[i]}
      onClick={() => this.props.onClick(i)} />;
  }

  render() {
    //检查是否有人获胜 获胜无法继续落子
    const winner = calculateWinner(this.props.squares);
    let status;
    if (winner) {
      status = 'Winner:' + winner;
    } else {
      status = 'Next player: ' + (this.props.xIsNext ? 'X' : 'O');
    }

    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}


//Game 组件则为我们即将要编写的代码预留了一些位置
class Game extends React.Component {

  constructor() {
    super();
    this.state = {
      history: [{
        squares: Array(9).fill(null),
      }],
      xIsNext: true,
      stepNumber: 0

    }
  }

  handleClick(i) {
    const history = this.state.history;
    const current = history[history.length - 1];
    const squares = current.squares.slice();
    if (calculateWinner(squares) || squares[i]) {
      return;
    }
    squares[i] = this.state.xIsNext ? 'X' : 'O';
    this.setState({
      history: history.concat([{
        squares: squares
      }]),
      stepNumber: history.length,
      xIsNext: !this.state.xIsNext,
    })
  }

  jumpTo(step) {
    this.setState({
      stepNumber: step,
      xIsNext: (step % 2) ? false : true,
    })
  }
  render() {
    const history = this.state.history;
    const current = history[this.state.stepNumber];
    const winner = calculateWinner(current.squares);


    const moves = history.map((step, move) => {
      const desc = move ?
        'Move #' + move :
        'Game start';

      return (
        <li key={move}>
          <a href="#" onClick={() => this.jumpTo(move)} >{desc}</a>
        </li>
      );
    })
    let status;
    if (winner) {
      status = 'Winner: ' + winner;
    } else {
      status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
    }

    return (
      <div className="game">
        <div className="game-board">
          <Board
            squares={current.squares}
            onClick={(i) => this.handleClick(i)}
          />
        </div>
        <div className="game-info">
          <div>{status}</div>
          <ol>{moves}</ol>
        </div>
      </div>
    );
  }
}

// ========================================

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


//判断游戏获胜方的代码
function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}