Styling in React
import './index.css';
- index.css is typically used for global styles
- Basic resets, body styles, universal fonts
- Imported in index.js
CSS in React
- App.css is often used to style the main App component or styles that are more specific to the core of your app
- Main layout, root structure, styles unique to the app
- Imported in App.js
CSS Modules in React
- App.css: This is a regular CSS file. Any styles defined here are global by default
- App.module.css: This is a CSS Module file. When you rename a CSS file to end with .module.css
Styled Components in React
const StyledButtonLarge = styled (StyledButton)
padding: 10px;;
Extending Styles from Another Styled ComponentStyling a
<form>
Element
const StyledSearchForm = styled.form`
padding: 10px 0 20px 0;
display: flex;
align-items: baseline;
`
SVGs in React
- Importing an SVG File Directly as a Component
import { ReactComponent as Icon } from './assets/icon.svg';
- Inlining SVG as JSX Code:
const MyIcon = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="50"
height="50"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<circle cx="12" cy="12" r="10" />
<line x1="12" y1="8" x2="12" y2="12" />
<line x1="12" y1="16" x2="12.01" y2="16" />
</svg>
)
- Using SVG as background-image in CSS
/* styles.css */
.icon-background {
width: 50px;
height: 50px;
background-image: url ('./assets/icon.svg'); /* Path to SVG file */
background-size: cover;
}
React Maintenance
Performance in React (Advanced)
- Don’t re-render if not needed
- React’s memo API checks whether the props of a component have changed. If not, it does not re- render even though its parent component re-rendered.
- how can the memo and use call combine with each other to prevent re-render;a new function is created every time it’s defined inside a component,Using useCallback for Stable Function References
Don’t rerun expensive computations
- memo: Prevents child components from re-rendering unnecessarily
const MyComponent = React.memo ((props) => {
console.log ('Rendered MyComponent');
return <div>{props.value}</div>;
});
- useMemo:Avoids re-computing expensive calculations
const memoizedValue = React.useMemo (() => expensiveFunction (dependency), [dependency]);
- useCallback:Avoids creating new function references on every render
typescript
- React application is finally typed by TypeScript
Testing in React
- Unit tests are for small, isolated blocks of code, such as a single function or component.
- Unit tests are for small, isolated blocks of code, such as a single function or component. Integration tests help us figure out how well these blocks of code work together
- end-to-end tests simulate a real-life scenario, like a user logging into a web application.
- Test Suites, Test Cases, and Assertions
React Project Structure
- Sorting
- Reverse Sort
- Remember Last Searches
- Paginated Fetch
//In React, we use useState to store these things.
- React 中的 状态(state) 就像是我们应用中存储信息的容器
- 你定义状态的地方,通常也是你更新数据的地方。
- 在 React 组件中,除了数据的管理和副作用的处理,其他的业务逻辑都通常由函数来处理。这些函数可以是事件处理函数(如按钮点击)或数据处理函数(如排序、筛选)
- React 使用 JSX 来描述 UI,
- useState 就是你存放商品的仓库
- useEffect 就是生产线的启动器,当组件(生产线)第一次启动时,useEffect 就会执行一些初始化的操作,比如从 API 获取数据,就像是从外部进货、开始处理商品。
- 函数是生产线上的工人,它们负责处理数据,进行排序、过滤等操作,并根据需求更新仓库中的商品(即更新状态)。
- return 部分则是展示出来的产品,它展示了仓库中所有的商品,并且提供了让用户与商品交互的界面,比如按钮、输入框等。
React 组件的生命周期
- 初始化阶段:组件创建时,React 会调用 useState 初始化数据,useEffect 会执行一些副作用(比如 API 请求)。
- 渲染阶段:每次组件的状态或 props 发生变化时,React 会重新渲染 UI
- 清理阶段:如果需要清理资源(如定时器、订阅等),可以在 useEffect 中返回一个清理函数,确保组件卸载时能够清理资源。
- 副作用是指那些不会直接影响组件输出的操作,但是会对外部环境产生影响或者需要从外部环境获取信息。这些操作包括:
- 数据请求:从外部 API 获取数据
- 订阅事件:比如从服务器接收推送消息
- 操作 DOM:直接修改 DOM(虽然 React 本身会管理 DOM,但有时你需要做一些直接操作)
- 设置定时器:比如使用 setTimeout 或 setInterval 来定时执行某些操作