-------------来源于阅读官方文档及日常开发（持续更新）

一、邂逅React

1. 使用 React 编写组件时，返回的 JSX 小括号的使用情况

React 组件必须返回单个 JSX 元素
返回单行jsx时可以不需要小括号包裹
返回多行jsx时需要使用小括号包裹

2. React 组件是返回标签的 JavaScript 函数

React 组件必须以大写字母开头，而 HTML 标签则必须是小写字母。
使用 JSX 编写标签, JSX 比 HTML 更加严格。你必须闭合标签，如 <br />。你的组件也不能返回多个 JSX 标签。你必须将它们包裹到一个共享的父级中，比如 <div>...</div> 或使用空的 <>...</> 包裹：

js 复制代码

function AboutPage() {  
  return (  
      <>  
        <h1>About</h1>  
        <p>Hello there.<br />How do you do?</p>  
      </>  
  );  
}

3. 添加样式

在 React 中，你可以使用 className 来指定一个 CSS 的 class。它与 HTML 的 class属性的工作方式相同

js 复制代码

<img className="avatar" />

4. 显示数据

JSX 会让你把标签放到 JavaScript 中。而大括号会让你 "回到" JavaScript 中，这样你就可以从你的代码中嵌入一些变量并展示给用户。

注意: 这里的style嵌套两个中括号, 最里层的中括号表示一个css样式对象。

js 复制代码

return (  
  <img  
     className="avatar"  
       src={user.imageUrl}
       style={{
         width: user.imageSize,
         height: user.imageSize
       }}
   />  
);

5. 渲染列表

你将依赖js特性，例如for循环和array的map()函数来渲染组件列表。
<li> 有一个 key 属性。对于列表中的每一个元素，你都应该传递一个字符串或者数字给 key，用于在其兄弟节点中唯一标识该元素。

js 复制代码

const products = [  
  { title: 'Cabbage', id: 1 },  
  { title: 'Garlic', id: 2 },  
  { title: 'Apple', id: 3 },  
];
// 你的组件中，使用 map() 函数将这个数组转换为 <li> 标签构成的列表
const listItems = products.map(product =>  
  <li key={product.id}>  
    {product.title}  
  </li>  
);  
return (  
  <ul>{listItems}</ul>  
);

6. 响应事件

你可以通过在组件中声明 事件处理 函数来响应事件

js 复制代码

function MyButton() {  
  function handleClick() {  
    alert('You clicked me!');  
   }  

   return (  
     <button onClick={handleClick}>  
       Click me  
     </button>  
   );  
}

7. 事件更新

通常你会希望你的组件记住一些信息并展示出来，比如一个按钮被点击的次数。要做到这一点，你需要在你的组件中添加 state。

引入useState
useState()的返回值：useState 函数接收一个参数，即初始状态的值，并返回一个包含两个元素的数组：当前状态的值和更新状态的函数。
你可以给它们起任何名字，但按照惯例会像 [something, setSomething] 这样为它们命名。
如果你多次渲染同一个组件，每个组件都会拥有自己的 state。
注意，每个按钮会 "记住" 自己的 count，而不影响其他按钮。

js 复制代码

import { useState } from 'react';

export default function MyApp() {
  return (
    <div>
      <h1>Counters that update separately</h1>
      <MyButton />
      <MyButton />
    </div>
  );
}

function MyButton() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      Clicked {count} times
    </button>
  );
}

8. Hook

以 use 开头的函数被称为 Hook 。useState 是 React 提供的一个内置 Hook。你也可以通过组合现有的 Hook 来编写属于你自己的 Hook。
Hook 比普通函数更为严格。你只能在你的组件（或其他 Hook）的顶层调用 Hook。如果你想在一个条件或循环中使用 useState，请提取一个新的组件并在组件内部使用它。举个例子：

js 复制代码

import React, { useState } from 'react';

function Example() {
  // 错误！在条件语句中使用了 useState
  if (someCondition) {
    const [count, setCount] = useState(0); 
  }
  
  // 错误！在循环中使用了 useState
  for (let i = 0; i < 5; i++) {
    const [count, setCount] = useState(0); 
  }
  
  // 错误！在嵌套函数中使用了 useState
  function innerFunc() {
    const [count, setCount] = useState(0); 
  }

  // 正确的用法
  const [count, setCount] = useState(0);

  // ...组件其他代码

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

9. 组件间数据共享

由于每个组件都有自己独立的state，开发中经常涉及需要组件 共享数据并一起更新 这时候就需要state的提升。
需要将各个子组件的 state "向上" 移动到最接近包含所有组件的父级组件之中。
父组件传递给子组件的的数据称为prop

js 复制代码

import { useState } from 'react';

export default function MyApp() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Counters that update together</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}

// 解构出对应的prop
function MyButton({ count, onClick }) {
  // 修改前由于该组件被渲染多次，所以他们有各自的state，并互不影响
  // 修改前： const [count, setCount] = useState(0);
  return (
    <button onClick={onClick}>
      Clicked {count} times
    </button>
  );
}

二、React哲学

React 可以改变你对可见设计和应用构建的思考。当你使用 React 构建用户界面时，你首先会把它分解成一个个组件，然后，你需要把这些组件连接在一起，使数据流经它们。----------React官方中文文档

开发步骤

将UI拆解为组件层级结构
- 程序设计 ------使用同样的技术决定你是否应该创建一个新的函数或者对象。这一技术即单一功能原理，也就是说，一个组件理想得仅做一件事情。但随着功能的持续增长，它应该被分解为更小的子组件。
- CSS------思考你将把类选择器用于何处。(然而，组件并没有那么细的粒度。)
- 设计------思考你将如何组织布局的层级。
使用 React 构建一个静态版本
- 根据你的数据模型，构建一个不带任何交互的 UI 渲染代码版本...经常是先构建一个静态版本比较简单，然后再一个个添加交互。构建一个静态版本需要写大量的代码，并不需要什么思考; 但添加交互需要大量的思考，却不需要大量的代码。
- 你既可以通过从层次结构更高层组件开始"自上而下"构建，也可以通过从更低层级组件"自下而上"进行构建。在简单的例子中，自上而下构建通常更简单；而在大型项目中，自下而上构建更简单。
导入state
- 为了使 UI 可交互，我们可以使用state来实现。
- state 作为应用程序需要记住改变数据的最小集合。组织 state 最重要的一条原则是保持它 DRY（不要自我重复）。
- 标记出不需要state来实现的数据：
  1. 随着时间推移 保持不变？如此，便不是 state。
  2. 通过 props 从父组件传递？如此，便不是 state。
  3. 是否可以基于已存在于组件中的 state 或者 props 进行计算？如此，它肯定不是state！
state所处的位置
- React 使用单向数据流，通过组件层级结构从父组件传递数据至子组件。为你应用程序中的每一个 state:
1. 验证每一个基于特定 state 渲染的组件。
2. 寻找它们最近并且共同的父组件------在层级结构中，一个凌驾于它们所有组件之上的组件。
3. 决定 state 应该被放置于哪里:
  1. 通常情况下，你可以直接放置 state 于它们共同的父组件。
  2. 你也可以将 state 放置于它们父组件上层的组件。
  3. 如果你找不到一个有意义拥有这个 state 的地方，单独创建一个新的组件去管理这个 state，并将它添加到它们父组件上层的某个地方。