React实践

css in js
组件拆分组合
hooks ......

一. css in js

组件级别样式：在 React 中，推荐将样式与组件绑定在一起，这样可以使得组件更加独立和可重用。在 CSS-in-JS 中，通过在组件中定义样式，可以确保样式只影响特定的组件，而不会泄漏到其它组件中。

推荐使用Styled-components

基本用法及优点

使用模板字符串和动态样式：CSS-in-JS 允许使用 JavaScript 的模板字符串和动态值来创建动态样式。这样可以根据组件的 props 或状态来动态修改样式。

import styled from 'styled-components';

const Button = styled.button`
  background-color: ${(props) => (props.primary ? '#f50057' : '#2196f3')};
  color: #ffffff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
`;

const App = () => {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
};

避免样式的全局污染：CSS-in-JS 可以避免全局 CSS 的问题，因为样式只会影响到特定组件。这样可以减少样式冲突和维护上的困扰。
组件化样式复用：在 CSS-in-JS 中，样式可以定义成函数或组件，从而实现样式的复用。可以通过高阶组件或继承来共享样式。


const sharedButtonStyles = `
  background-color: #f50057;
  color: #ffffff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
`;

const PrimaryButton = styled.button`
  ${sharedButtonStyles}
`;

const SecondaryButton = styled.button`
  ${sharedButtonStyles}
  background-color: #2196f3;
`;

const App = () => {
  return (
    <div>
      <PrimaryButton>Primary Button</PrimaryButton>
      <SecondaryButton>Secondary Button</SecondaryButton>
    </div>
  );
};

总结：样式与组件紧密结合，提高代码的可维护性和组件的独立性。选择适合项目的 CSS-in-JS 库，将样式定义在组件级别，利用模板字符串和动态样式，避免全局样式的污染，以及组件化样式复用。

二. React组件的拆分与组合

组件拆分与组合是提高代码复用性、可维护性和可测试性的重要策略。下面是一些组件拆分与组合的规则和最佳处理方式：

规则：

单一职责原则（Single Responsibility Principle） ：每个组件应该只关注单一的功能或视图，而不是将多个不相关的功能混合在一个组件中。这有助于使组件更易于理解、测试和维护。
容器组件与展示组件拆分：采用容器组件与展示组件拆分模式，将数据逻辑和 UI 表现分离开来。容器组件负责数据获取和状态管理，而展示组件负责渲染 UI。这样有利于提高代码复用性，并使组件更具可测试性。
组件的独立性：每个组件应该尽可能独立，不依赖于特定的上下文环境。这样可以使得组件更易于移植和重用。

最佳处理方式：

拆分大型组件：将大型组件拆分为多个小组件，每个小组件关注单一的功能。这有助于减少代码的复杂性，并提高组件的可读性。
组件属性（Props）组合：使用组件属性将一个组件嵌套在另一个组件中，实现组件的组合。这样可以构建复杂的 UI，同时保持组件的独立性和可维护性。
自定义 Hooks：将一些共享的业务逻辑封装成自定义 Hooks，以实现逻辑复用。这样可以将组件的状态和逻辑与具体的 UI 细节分离开来。
高阶组件（Higher-Order Components） ：使用高阶组件来包装一个或多个组件，以实现横切关注点（cross-cutting concerns）的复用。高阶组件本身不渲染任何 UI，而是返回另一个组件，增强它的功能。
Render Props 模式：通过 Render Props 模式，将一个函数作为组件的 children 属性传递给父组件，从而共享数据和功能。这样可以实现更灵活的组件组合。（典型应用：主题切换、购物车、轮播图）
组件库的使用：对于常用的 UI 组件和样式，可以考虑使用现有的组件库（如 Ant Design、Material-UI 等），而不是从头开始开发。这样可以节省开发时间，同时确保组件的一致性和品质。

总结：在 React 中，合理的组件拆分与组合是提高代码质量和开发效率的关键。遵循单一职责原则，采用容器组件与展示组件拆分模式，保持组件的独立性，拆分大型组件，使用组件属性组合和自定义 Hooks，以及考虑使用高阶组件和 Render Props 模式，都是最佳处理方式。通过这些规则和最佳处理方式，可以更好地组织和管理 React 组件，使得应用更易于开发、维护和扩展。

。。。。。。。。。。。更新

React 实践

React实践

一. css in js

基本用法及优点

二. React组件的拆分与组合