005.133-React.md

CLC: TP312JS

官方教程：

  • 做个小游戏的实践教程： https://reactjs.org/tutorial/tutorial.html

  • 更系统的教程： https://reactjs.org/docs/hello-world.html

写程序不知道怎么归类

JSX 对象，特别是在用 map 或者之类的函数生成 JSX 对象时，记得用 () 括起来而别用 {}

<List>
    {navItems.map((item: NavItem, idx) => (
        <ListItem key={idx} disablePadding>
            <ListItemButton component={item.link.slice(0,4) == "http"? MuiLink : Link} to={item.link}>
                <ListItemIcon>
                    {item.icon}
                </ListItemIcon>
                {getLocaleText(item.name, lang)}
            </ListItemButton>
        </ListItem>
    ))}
</List>

全局变量的声明和初始化记得写在 hook 函数之外，（原因可能是？：）否则可能被组件再次初始化，丢失在诸如 useEffect 等函数里所做的更改

Virtual DOM vs. real DOM

'diff' in React (vs. traditional 'diff')

传统diff算法通过循环递归对节点进行依次对比，效率低下，算法复杂度达到 O(n^3)，react将算法进行一个优化，复杂度姜维O(n)

Life Cycle | 生命周期

https://vue3js.cn/interview/React/life%20cycle.html

Life Cycle là Cradle-to-Grave 摇篮から坟墓へとの整个过程

流程：

  • 创建阶段

    • constructor

    • getDerivedStateFromProps （创にも更にも有り）

    • render （创にも更にも有り）

    • （更新 DOM と refs）

    • componentDidMount

  • 更新阶段

    • getDerivedStateFromProps （创にも更にも有り）

    • shouldComponentUpdate

    • render （创にも更にも有り）

    • getSnapshotBeforeUpdate

    • （更新 DOM と refs）

    • componentDidUpdate

  • 卸载阶段

    • componentWillUnmount

Hooks

https://vue3js.cn/interview/React/React%20Hooks.html

使得函数组件也可以有状态。

种类：

  • useState

    • state声明方式：函は useState 直接获取，类は constructor 中

    • state读取方式：函は直接使用变量，类は this.state.x

    • state更新方式：函は setX 更新，类は this.setState()

    • 总的来讲，useState 更简洁，减少了this指向不明确的情况

  • useEffect

    • 可以让我们在函数组件中进行一些带有副作用的操作

    • useEffect第一个参数接受一个回调函数，默认情况下，useEffect会在第一次渲染和更新之后都会执行，相当于在componentDidMount和componentDidUpdate两个生命周期函数中执行回调

    • 传入第二个参数后，React 会在每一次重渲染时比较这个变量（是一个数组，里面每个变量各自被比较）的值，没变就跳过 effect

      • 不传参数：每次rander后都执行

      • 传入空数组：不会再执行（因为空数组没有变）

    • 回调函数中可以返回一个清除函数，这是effect可选的清除机制，相当于类组件中componentwillUnmount生命周期函数，可做一些清除副作用的操作

    • 所以， useEffect相当于componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个生命周期函数的组合

  • useContext

    • 创建 XXXContext，可以在 <XXXContext.Provider value={theXXXContext}> </XXXContext.Provider> 套起来的子组件里使用之。

  • useRef

    • 这种值的改变不触发 re-render

  • useReducer

  • useCallback

  • useMemo

useEffect

useEffect(() => {
    const boardEvent = window.setInterval(refreshBoard, 5000);
    return () => {
        window.clearInterval(boardEvent);
    };
}, [isInitialized]);

这样做就是在初始化后执行这个定时刷新的函数。传入空数组的话，refreshBoard() 函数里的内容有可能没有初始化，就无法显示想要的内容了。

第一个参数是回调函数，里面return的内容是清除副作用的函数。

第二个参数是比较的对象，数组里的每一个成员单独比较，发生变化才会执行第一个回调函数。

Communication between Components | 组件间の通信

https://vue3js.cn/interview/React/communication.html

由于React是单向数据流，主要思想是组件不会改变接收的数据，只会监听数据的变化，当数据发生变化时它们会使用接收到的新值，而不是去修改已有的值

因此，通信过程中，数据的存储位置都是存放在上级位置中

通信方式：

  • 父组件에서子组件까지：传递参数即可

  • 子组件에서父组件까지：父组件向子组件传参数，拿其值

  • 兄弟组件사이：父组件作为中介

  • 父组件에서后代组件까지：使用 context

    • React.createContext 以创建

    • 其下 Provider 组件创建数据源， Consumer 组件接收数据

      • 接收数据也可以用 contextType

  • 非关系组件사이

    • redux 等で全局资源管理

Create React App and react-scripts

https://create-react-app.dev/

Create React App is a toolchain that provides a pre-configured environment for creating React applications. One of its main benefits is that it abstracts away many of the complicated configuration details involved in setting up a React application from scratch.

Create React App includes a standard set of build tools (such as Webpack and Babel) and comes with a set of pre-configured build scripts that handle things like transpiling your code, bundling dependencies, running a development server, and optimizing production builds.

引入 react-scripts 就可以触发了，把 npm run 的 scripts 也改成 "react-scripts start" etc. 更好。

就比如它已经包含 Webpack 并设置到支持 CSS preprocessors like Sass, which is something you would have to configure manually in a barebones React application.

所以很多东西只需要最少的设置就可以用了！

Next.js

Next.js是一个构建于 Node.js 之上的开源 Web 开发框架，支持基于 React 的 Web 应用程序功能，例如服务端渲染和生成静态网站。 React 于官方文件内的“推荐的工具链”中提及 Next.js，建议将其作为“使用 Node.js 构建服务器渲染网站”的解决方案。[5] 传统的 React 应用程序只能在客户端浏览器中渲染内容，Next.js 扩展了此功能以包括在服务端渲染的应用程序。

https://nextjs.org/docs/getting-started

Next.js 路由与 React 不同： https://nextjs.org/docs/migrating/from-react-router

  • pages 目录里面的不同文件就是不同页面，然后动态页面又另有规则

获取资源于 Vercel

Next.js 是由 Vercel 维护的。Vercel 自己的网站上也有一些有用的工具，有模板，也提供部署前端项目的服务器可用

  • 模板 https://vercel.com/templates

For TypeScript

Component (React.FC/React.FunctionComponent)

https://stackoverflow.com/questions/59988667/typescript-react-fcprops-confusion

import React from "react";

interface Props {
  message: string;
}

const MyComponent: React.FC<Props> = ({ message }) => {
  return <div>{message}</div>;
};

export default MyComponent;

Myonh-De Leng

Previous005.133-Python.mdNext005.133-Ruby.md

Last updated