From 207fbfd0ff7853e5392b364e4b94ebcfb00f9ab1 Mon Sep 17 00:00:00 2001
From: Rikako Wu <496063163@qq.com>
Date: Mon, 13 Feb 2023 13:34:21 +0800
Subject: [PATCH] =?UTF-8?q?react=E7=9B=B8=E5=85=B3=E6=96=87=E6=A1=A3?=
 =?UTF-8?q?=E7=9A=84=E9=98=85=E8=AF=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 react/react.md | 191 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 191 insertions(+)
 create mode 100644 react/react.md

diff --git a/react/react.md b/react/react.md
new file mode 100644
index 0000000..73dbb32
--- /dev/null
+++ b/react/react.md
@@ -0,0 +1,191 @@
+# 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保持唯一即可
+
+