10 分钟快速入手 React 概念，然后开始干活儿

身边人都说 React 难用，但难用不难用，这个我们没有什么发言权。主要还是美国大厂维护，全世界的使用量大。

至于难用，确实 Vue 要好用很多。但是 react 总比原生 JavaScript 好用就行。

如果大家没有用过 react 的，今天带大家简单入个门。了解一下 react 的全景，就是里面的所有的概念。方便熟悉 Vue 或者 原生 JS 的人，快速了解 react 是怎么一回事，然后赶紧上手干活儿。

组件

这个组件，我觉得是最重要的，叫 components ， 是每个 react 应用的构建模块。你可以理解为积木块，能一直重复使用，比直接敲 HTML 舒服很多。就比如下面这些。

<Header />
<Content />
<Footer />

就是创建应用里，所有可见的内容，懂吧？按钮、输入框这样。

每个组件，就是一个返回 HTML 的 js 函数。当然，也不叫 HTML ，虽然长的差不多，但叫 JSX。

想当年，写 原生 JS 的时候，得使用 createElement 函数，太难使用了。

不过 JSX ，不能按照 HTML 的格式写，就是驼峰命名法，比如：

<button class="btn">   // 这样是 HTML
<button className="btn">  // 这个才是 JSX 的写法

毕竟，它是 JS 嘛，所以写的得按照另一方式。当然，jsx 的好处就是，可以直接使用 js 的变量，跟 PHP 一样了哈哈。

直接使用花括号就 OK 了。

const name = "李华";
const color = "red";
<div>我叫 {name}</div>
<div style={{color}}>我最喜欢的颜色是 {color}</div>

很直观，容易维护。

空组件 react fragment

你的组件，只能返回一个副组件元素，如果返回多个组件元素，会报错，因此如果非得返回多个组件元素，那么需要写个 < div > 或者直接一个 react fragment 空组件 < > < / > 。

<div>
    <Components1 />
    <Components2 />
</div>

或者

<>
    <Components1 />
    <Components2 />
</>

如果，你想把数据传给另一个组件，怎么办？有个概念叫 props 。

直接在你想要传递数据的组件上，添加一个属性：

<Greeting text={'Hi'} name={'李华'}>

// 之后就可以用了

function Greeting(props) {
    return <h1>{props.text}，我叫{props.name}， 你好啊！</h1>
}

优雅吧！

子组件 children

这个很好用。props 什么都能传，甚至可以传 组件。

<Parent>
    <Thischild />
</Parent>

// ---- 

function Parent(props) {
  return <div>{props.children}</div>
}

这样，props.children 就可以访问 Thischild 了。

这个主要用于什么呢？如果你希望，创建布局时，很多页面都想要有相同的布局，那就这样！

Key props

当然，props 属性名，有一个叫 Key，我们保留。

这个属性，是让 react 能够区分不同的组件。

通常在你使用 map 函数，创建一个列表时会不得不用到：

{items.map(item => (
  <Component key={item.id} />
))}

它就是用于标识组件的唯一字符串。

当然，你无需可以记得，因为 react 会在控制台，提示你在该使用的时候，使用 key 。

虚拟 DOM （VDOM）

react 在渲染我们的 jsx 时，会把它解析成一棵树，也就是虚拟 DOM：

当我们的数据发生变化时，react 会使用 defense 的算法，在极短时间内，分析出差异，然后更新我们的真实 HTML 。

事件

我们如果想在某个按钮上添加点击事件，那就：

function ShowAlert() {
    const handleClick = () => {
        alert('警告');
    }

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

比 JS 原生的，舒服多了吧？

状态管理 钩子函数

两个很重要的变量。

一个叫 useState() ，另一个叫 useReducer() 。

比如:

const [likes, setLikes] = useState(0)

一共两个变量，第一个是当前的状态变量，第二个是用于更新状态的函数。

什么意思呢？先看看这个案例：

import { useState } from 'react';

function Likes() {
  // 定义状态：点赞数，默认0
  const [likes, setLikes] = useState(0);

  // 点击事件：点赞数+1
  const handleClick = () => {
    setLikes(likes + 1);
  };

  return (
    <button onClick={handleClick}>
      Likes: {likes}
    </button>
  );
}

export default Likes;

我们可以使用更新函数 setLikes 来更新 likes 的次数。

受控组件模式

这个是 useState() 使用的一个非常好的模式， 先看一个例子：

import { useState } from 'react';

function ControlledInput() {
  // 定义输入框状态
  const [value, setValue] = useState('');

  return (
    <input
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

export default ControlledInput;

用户在这个 input 输入框里写的内容，会被保存到状态里。

我们如果想修改组件的行为，那么直接修改组件的状态就 OK 了！

五种钩子

上面的 usestate 是 react 里最常用的钩子。

在 react 里有五种钩子：

（常用）useState：定义组件响应式变量（就是存数据，一改，页面跟着动）
useReducer：复杂状态统一管理

（常用）useEffect：处理副作用与生命周期（加载、更新、销毁...）

（常用）useRef：持久化存储 DOM / 值（获取 DOM ，存值的时候，不触发刷新）

useContext：跨组件快捷传值（无需层层传递，能跨组件传值）

useMemo()：复杂的计算，可以缓存，算一次就 OK 了
useCallback()：缓存函数，就建立一次，不会重复渲染

具体怎么用，大家可以查文档，反正就是这么会儿事。

纯净原则 purity

为了保持组件的纯净，组件应该只返回 jsx 元素。

并且不应该修改在组件函数外部定义的变量。什么意思呢？看看这个不纯净的反面教材，错误案例：

let count = 0;

function Cup() {
  count = count + 1;
  return <h2>Cup {count}</h2>;
}

渲染一次，改一次变量。。。 这是错误的！

那怎么保证我们不会出现这种低级的错误的情况？使用一个叫 strict mode 的组件！

这个组件，就会在开发时时刻提醒我们，有没有犯这种错。

使用很简单，就使用 < StrictMode > 包裹我们的组件就 OK 了！

import { StrictMode } from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

就像这样。

其他的钩子的使用，大家就去找案例吧，上面那几种弄完，基本上 react 的所有大概念就 OK 了，可以尝试去干活儿了！