192 lines
6.4 KiB
Markdown
192 lines
6.4 KiB
Markdown
# React
|
||
## 概览
|
||
React是一个声明式，用于构建用户界面的JavaScript库。React可以将一些简短、独立的代码片段组合成复杂的ui界面，**独立的代码片段在React中被称之为组件**。
|
||
## React.Component组件
|
||
```js
|
||
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 name="Mark" />
|
||
```
|
||
可以通过组件来告诉React需要在屏幕上显示的内容，当数据发生改变时，**React会高效的更新内容并重新渲染组件**。
|
||
以上，ShoppingList声明了一个React组件类型。React组件类型会接受一些组件参数，该参数称之为`props`，组件还会通过render方法返回显示在屏幕上的视图层次结构。
|
||
render方法的返回值将会描述希望在屏幕上看到的内容。render返回值是一个React元素，是对渲染元素的轻量级描述。`jsx`语法支持更简单的书写这些结构，语法\</div\>会被编译为如下内容：
|
||
```js
|
||
return React.createElement('div', {className: 'shopping-list'},
|
||
React.createElement('h1', /* ... h1 children ... */),
|
||
React.createElement('ul', /* ... ul children ... */)
|
||
);
|
||
```
|
||
在jsx中，可以在html元素中使用js表达式，只需要用大括号将js表达式括起来。
|
||
```js
|
||
<h1>Shopping List for {this.props.name}</h1>
|
||
```
|
||
上述示例中的ShoppingList只渲染了一些内置的DOM组件，如`div`,`li`等，但是也可以组合和渲染自定义的React组件。例如，可以通过`<ShoppingList/>`来表示整个购物清单组件。
|
||
> 每个组件都是封装好的，并可以单独运行，如此可以通过组合组件来构建复杂代码
|
||
|
||
## 组件响应事件及状态
|
||
### 事件处理函数
|
||
如果想要为组件指定事件处理函数，可以通过如下方式：
|
||
```js
|
||
class Square extends React.Component {
|
||
render() {
|
||
return (
|
||
<button className="square" onClick={function() { alert('click'); }}>
|
||
{this.props.value}
|
||
</button>
|
||
);
|
||
}
|
||
}
|
||
```
|
||
### 组件状态
|
||
可以通过在组件构造函数中初始化`this.state`属性来存储组件状态，this.state应被视作组件的私有属性。
|
||
示例如下：
|
||
```js
|
||
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>
|
||
);
|
||
}
|
||
}
|
||
```
|
||
可以通过如下代码来修改和渲染React组件中的state属性：
|
||
```js
|
||
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>
|
||
);
|
||
}
|
||
}
|
||
```
|
||
> ### setState
|
||
> 每次在组件内调用setState方法时，React都会自动更新其子组件。
|
||
|
||
### 组件状态提升
|
||
如果需要同时获取多个子组件的数据，或者多个组件之间需要通信，此时，可以将子组件的state数据提升至父组件中进行存储。
|
||
父子组件之间传递数据和处理函数的示例如下：
|
||
```js
|
||
// parent component,
|
||
// pass `value`,`onclick` props to child component
|
||
class Board extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
squares: Array(9).fill(null),
|
||
};
|
||
}
|
||
|
||
handleClick(i) {
|
||
const squares = this.state.squares.slice();
|
||
squares[i] = 'X';
|
||
this.setState({squares: squares});
|
||
}
|
||
|
||
renderSquare(i) {
|
||
return (
|
||
<Square
|
||
value={this.state.squares[i]}
|
||
onClick={() => this.handleClick(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>
|
||
);
|
||
}
|
||
}
|
||
|
||
// child component
|
||
class Square extends React.Component {
|
||
render() {
|
||
return (
|
||
<button
|
||
className="square"
|
||
onClick={() => this.props.onClick()}
|
||
>
|
||
{this.props.value}
|
||
</button>
|
||
);
|
||
}
|
||
}
|
||
```
|
||
### React不可变性
|
||
相比于直接修改原有数据的属性，直接用新对象替换旧的数据对象是更推荐的做法，其有如下优点：
|
||
- 如果需要查看属性的历史值或实现撤回功能，那么不可变数据将会令实现相当简单，只要存储历史state对象就可以
|
||
- 如果使用不可变对象，查看数据是否更改会容易很多，只需将旧对象地址和新对象地址进行比较即可，无需遍历对象结构并比较属性值
|
||
- 不可变对象可以轻易的发现数据对象是否发生改变，从而确定React是否应该重新渲染
|
||
|
||
## 函数组件
|
||
如果组件中并不包含state状态，且组件只包含render一个方法，可以通过函数来实现其组件，而无需继承React.Component类。
|
||
通过函数组件替换React.Component组件的示例如下：
|
||
```js
|
||
function Square(props) {
|
||
return (
|
||
<button className="square" onClick={props.onClick}>
|
||
{props.value}
|
||
</button>
|
||
);
|
||
}
|
||
```
|
||
## React list
|
||
在React中使用列表时，需要为列表项指定一个key，以区分该列表项和其他兄弟列表项。
|
||
`key`是React中一个特殊的保留属性，当React元素被创建时，React会获取key属性并且将其存储到返回的元素中。元素的`key`属性并无法通过`this.props.key`形式来获取，React会通过`key`自动判断哪些组件需要被更新，但是组件无法访问它的`key`。
|
||
> 组件的key并不需要在全局保证唯一，只需要在当前同一级元素之中key保持唯一即可
|
||
|
||
|