React Summary（三）

如何设计React组件

• 组件的分类：无状态组件+有状态组件
• 无状态组件：傻瓜组件、哑组件、展示组件，面向样式+布局，功能简单，复用性高，通用性强。
• 有状态组件：灵活组件，面向业务+组件间的组合，功能较复杂，通用性弱，复用性弱。

无状态组件（展示性组件、纯组件）

• 依赖传入属性来决定显示的内容+行为，内部一般不管理状态。
• 没有生命周期。

function Welcome(props) {
    return <div>{props.name}</div>
}

代理组件

• 是一种设计模式，允许在不改变原始组件的情况下，增强or修改原始组件。

样式组件

• 用来封装+复用组件的样式。npm安装style-components库。
• style-components可编写实际的CSS代码为React组件设置样式，同时保持了样式与组件的封装。

import styled from 'styled-components';
// 具名模板字符串 模板字符串标签
const Title = styled.h1`
color: red;
`

const StyledButton = styled.button`
background-color: green;
color: white;
`
function App() {
    return (
        <>
            <Title></Title>
            <StyledButton></StyledButton>
        </>
    )
}

模板字符串标签

• 允许在函数或库中拦截并处理模板字符串的内容。styled-components 利用了这一机制，能够在 JS 文件中直接编写 CSS 样式，而不需要使用 .css 文件。

function tagExample(strings, ...values) {
  console.log(strings); // 模板字符串的静态部分
  console.log(values);  // 模板字符串的插值部分
}

const name = "styled-components"; // ["This is a ", " example."]
tagExample`This is a ${name} example.`; // ["styled-components"]

布局组件

• 函数组件可利用React.memo()包裹整体布局内容，减少渲染次数。
• 类组件利用React.PureComponent{}包裹整体布局，减少渲染次数。

有状态组件

• 在内部维护一个or多个状态，这些状态修改后，会引起组件的重新渲染。
• 特点：一般类组件用this.state，函数组件用useState；一般用到生命周期钩子，类组件用componentDidMount发请求改状态，函数组件用useEffect发请求改状态；适用于用户的输入，请求服务器的响应来改变UI。

容器组件

• 管理数据+业务逻辑

React项目中目录划分

graph LR;
  A[src] --> B[index.js入口文件 ReactDOM渲染入口];
  A --> H[app.js 根组件];
    A --> F[components 通用组件];
  F --> F1[Button 通用性强 可用storybook之类的工具进行管理];
  A --> C[utils 工具类和文件];
  A --> D[hoc 通用高阶组件];
  A --> E[hooks 通用hooks];
  A --> G[pages/views];
  G --> G1[pageA];
  G1 --> G2[components pageA专用小组件];
  G1 --> G3[hooks pageA专用hooks];
  G1 --> G4[hoc pageA专用hoc];
  G1 --> G5[index.js pageA主组件入口];