初识React
React 是一个采用声明式，高效且灵活的，用来构建用户界面的框架。React 当中包含了一些不同的组件。
从使用 React.Component 开始，下面自定义一个组件
QQ.png
开发中一般都会使用一种名为 JSX 的语法扩展来跟方便地书写；在 JSX 中可以任意使用 JavaScript 表达式，只需要用一个大括号把表达式括起来；
要使用该组件时，通过这种标签语法: <ShoppingList name="Mark" />
来使用我们上面声明的组件。
从#字棋游戏学习React
Square 组件代表一个单独的 <button>，Board 组件包含了9个Square，也就是棋盘的9个格子。Game 组件则为我们即将要编写的代码预留了一些位置。现在这几个组件都是不具备任何的交互功能的。
1、通过props传递数据
Borad组件
class Board extends React.Component {
renderSquare(i) {
return <Square value={i} />;
}
render() {
const status = 'Next player: X';
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>
);
}
}
在 Board 组件的 renderSquare 方法中，传递一个名为 value 的 prop 到 Square 当中：
QQ.png
QQ.png
添加交互功能
QQ.png
传给 onClick属性一个函数方法，这里使用了 JavaScript 当中一种新的名为“箭头函数”的语法，
注意：假如写的是 onClick={alert('click')} ，警示框是会立即弹出（而不是点击之后再弹出）
组件状态
一个组件会接受名为 props 的参数；
在 React 组件的构造方法 constructor 中，你可以通过 this.state 为该组件设置自身的状态数据。下面以Square为例：
QQ.png
必须调用 super(); 方法，才能在继承父类的子类中正确获取到类型的 this 。
更改组件状态
通过点击事件触发 state 的改变，来更新棋盘格子显示的内容。
QQ.png
每当 this.setState 方法被触发时，组件都会开始准备更新。React 通过比较变化，来更新组件中改变了的内容。当组件重新渲染时，this.state.value 会变成 'X' ，也就能在格子里看到 X 的字样。
状态优化
现在，状态是独立保存在Borad上的每个 Square 组件当中的，但这种数据的独立使得无法对所有数据进行整体分析。
最好的解决方式是，直接将所有的 state 状态数据存储在 Board 组件当中。之后 Board 组件可以将这些数据传递给各个 Square 组件。
@：当你遇到需要同时获取多个子组件数据，或两个组件之间需要相互通讯的情况，把子组件的 state 数据提升至其共同的父组件当中保存。之后父组件可以通过 props 将状态数据传递到子组件当中。这样应用当中的状态数据就能够更方便地交流共享了。
1、修改Board 组件
现在，在 Board 组件的构造函数中，初始化一个包含9个空值的数组作为状态数据，并将这个9个元素分别传递到对应的9个 Square 组件当中：
QQ.png
并在 value 属性中传递对应 state 数组元素的值给Square组件：
QQ.png
现在每个格子当中的数据是存储在整个棋盘当中的，我们需要让格子组件能够修改整个棋盘组件数据的内容。下面，就来修改格子的点击事件处理函数——通过 props 传递一个父组件中的函数到子组件Square 中。
QQ.png
现在，从 Board 组件向 Square 组件中传递了两个 props 参数：value 和 onClick
2、修改Square组件
this.state.value 替换为 this.props.value、this.setState() 替换为 this.props.onClick()
QQ.png
现在，每次格子被点击时，就会触发传入的 onClick 方法，也就是触发Borad中的handleClick方法。下面，回到Borad中，编写 handleClick 方法：
handleClick(i) {
const squares = this.state.squares.slice();
squares[i] = 'X';
this.setState({squares: squares});
}
@ ：其中使用了 .slice() 方法，来将之前的数组数据浅拷贝到了一个新的数组中，而不是修改已有的数组。这种做法对后续工作非常有益，可以轻松地实现 撤销、重做以及时间旅行，记录判断等。
现在，格子组件 Square 不再拥有自身的状态数据了。它从父组件 Board 接受数据，并且当自己被点击时通知触发父组件改变状态数据，我们称这类的组件为：受控组件。
函数定义组件
由于组件 Square变成了受控组件，那么就可以去掉它的构造函数了。只需简单写一个以 props 为参数的 function ，返回 JSX 元素就搞定了。
QQ.png
注意：props.onClick后不加（），否则该方法会在 Square 组件渲染时被直接触发！
游戏完善
-
轮流落子
X 和 O 轮流落子。添加一个状态标志xIsNext，根据此标志决定是X还O
QQ.png
每走一步棋，都需要切换 xIsNext 的值，在handleClick方法中：
QQ.png
render 方法里提示当前执子的一方：
QQ.png
Key
当你在 React 当中渲染列表项时，React 都会试着存储对应每个单独项的相关信息。必须为列表中的每一项添加一个 key 作为唯一的标识符。
<li key={user.id}>{user.name}: {user.taskCount} tasks left</li>
1、key 是 React 中使用的一种特殊的属性，除此之外还有 ref 属性；
2、当元素被创建时，React 会将元素的 key 值和对应元素绑定，存储起来。但无法通过 this.props.key 获取到 key 的值；
3、React 会自动的，在判断元素更新时使用 key ，而组件自己是无法获取到 key 的。
4、组件的 keys 值并不需要在全局都保证唯一，只需要在当前的节点里保证唯一即可。
@ 只要你想在列表中对项目进行重新排列、添加或删除，强烈建议你在渲染列表项时添加 keys 值。 假如没有现成可以作为唯一 key 值的数据使用的话，你可能需要考虑重新组织设计你的数据了。
当一个列表被重新渲染时，React 会根据较新的元素内容依据相应的 key 值来匹配之前的元素内容。当一个新的 key 值添加到列表当中时，表示有一个组件被创建；被删除时表示有一个组件被销毁。Key 值可以让 React 明确标识每个组件，这样它才能在每次重新渲染时保有对应的状态数据。假如你去改变某个组件的 key 值的话，它会在下次渲染时被销毁并当作新的组件重新渲染进来。
网友评论