反应备忘单
react 自诞生以来已经发生了显着的发展，随着 hooks 的兴起，函数式组件已成为构建 react 应用程序的首选方法。本备忘单概述了在 react 中使用函数式组件的关键概念、功能和最佳实践。
1. 功能组件基础知识
功能组件是一个返回 react 元素的纯 JavascrIPt 函数。
|
1
2
3
|
const mycomponent = () => {
return <div>hello, world!</div>;
};
|
2. 使用 JSx
jsx 是一个语法扩展，允许您在 javascript 中编写类似 html 的代码。
|
1
2
3
4
5
6
7
|
const mycomponent = () => {
return (
<div>
<h1>welcome to react</h1>
</div>
);
};
|
3.道具
proPS 用于将数据从父组件传递到子组件。
571881438247
4.默认道具
您可以为组件定义默认 props。
|
1
2
3
|
const greeting = ({ name = "guest" }) => {
return <h1>hello, {name}!</h1>;
};
|
5. 状态与 usestate
usestate hook 允许您向功能组件添加状态。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
import { usestate } from 'react';
const counter = () => {
const [count, setcount] = usestate(0);
return (
<div>
<p>count: {count}</p>
<button onclick="{()"> setcount(count + 1)}>increment</button>
</div>
);
};
|
6.效果挂钩：useeffect
useeffect hook 可让您在功能组件中执行副作用。
|
1
2
3
4
5
6
7
8
9
10
11
|
import { useeffect } from 'react';
const datafetcher = () => {
useeffect(() => {
fetch('/API/data')
.then(response => response.JSON())
.then(data => console.log(data));
}, []);
return <div>data fetched. check console.</div>;
};
|
7. 条件渲染
根据一定的条件渲染不同的ui元素。
|
1
2
3
4
5
6
7
|
const loginmessage = ({ isloggedin }) => {
return (
<div>
{isloggedin ? <h1>welcome back!</h1> : <h1>please log in.</h1>}
</div>
);
};
|
8. 列表和键
渲染数据列表并使用键来帮助 react 识别哪些项目已更改。
|
1
2
|
const itemlist = ({ items }) => {
return (
|
{items.map(item => (
- {item.name}
))}
); };
9. 事件处理
处理功能组件中的事件。
|
1
2
3
4
5
6
7
|
const button = () => {
const handleclick = () => {
alert('button clicked!');
};
return <button onclick="{handleclick}">click me</button>;
};
|
10. 表格和受控组件
使用受控组件处理表单输入。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
const fORM = () => {
const [value, setvalue] = usestate('');
const handlechange = (e) => {
setvalue(e.target.value);
};
const handlesubmit = (e) => {
e.preventdefault();
alert(`submitted value: ${value}`);
};
return (
|
); };
11. 上下文api
使用 context api 进行跨组件树的状态管理。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
import { createcontext, usecontext } from 'react';
const mycontext = createcontext();
const myprovider = ({ children }) => {
const value = 'hello from context';
return (
<mycontext.provider value="{value}">
{children}
</mycontext.provider>
);
};
const mycomponent = () => {
const contextvalue = usecontext(mycontext);
return <div>{contextvalue}</div>;
};
|
12. 自定义挂钩
使用自定义挂钩创建可重用逻辑。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
import { usestate, useeffect } from 'react';
const usefetch = (url) => {
const [data, setdata] = usestate(null);
useeffect(() => {
fetch(url)
.then(response => response.json())
.then(data => setdata(data));
}, [url]);
return data;
};
const datacomponent = () => {
const data = usefetch('/api/data');
return <div>{data ? json.stringify(data) : 'loading...'}</div>;
};
|
13. 使用 usememo 进行记忆
通过记忆昂贵的计算来优化性能。
|
1
2
3
4
5
6
7
8
9
10
|
import { usememo } from 'react';
const expensivecomponent = ({ number }) => {
const expensivecalculation = usememo(() => {
return number * 2;
}, [number]);
return <div>{expensivecalculation}</div>;
};
|
14. 使用回调
使用 usecallback 来记忆函数，以防止不必要的重新渲染。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
import { usecallback } from 'react';
const button = ({ onclick }) => {
return <button onclick="{onclick}">click me</button>;
};
const parentcomponent = () => {
const handleclick = usecallback(() => {
console.log('button clicked');
}, []);
return <button onclick="{handleclick}"></button>;
};
|
15. 使用reducer
使用 usereducer hook 管理复杂的状态逻辑。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
import { usereducer } from 'react';
const reducer = (state, action) => {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
throw new error();
}
};
const counter = () => {
const [state, dispatch] = usereducer(reducer, { count: 0 });
return (
<div>
<p>count: {state.count}</p>
<button onclick="{()"> dispatch({ type: 'increment' })}>increment</button>
<button onclick="{()"> dispatch({ type: 'decrement' })}>decrement</button>
</div>
);
};
|
16. 碎片
使用片段对多个元素进行分组，无需向 dom 添加额外的节点。
|
1
2
3
4
5
6
7
8
|
const mycomponent = () => {
return (
<h1>title</h1>
<p>description</p>
>
);
};
|
17. 门户网站
将子组件渲染到父组件 dom 层次结构之外的 dom 节点中。
|
1
2
3
4
5
6
7
8
9
10
|
import { createportal } from 'react-dom';
const modal = ({ children }) => {
return createportal(
<div classname="modal">
{children}
</div>,
document.getelementbyid('modal-root')
);
};
|
18. 带有误差边界分量的误差边界
使用类组件作为错误边界。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
import { component } from 'react';
class errorboundary extends component {
constructor(props) {
super(props);
this.state = { haserror: false };
}
static getderivedstatefromerror(error) {
return { haserror: true };
}
componentdIDCatch(error, errorinfo) {
console.log(error, errorinfo);
}
render() {
if (this.state.haserror) {
return <h1>something went wrong.</h1>;
}
return this.props.children;
}
}
<errorboundary><mycomponent></mycomponent></errorboundary>
|
19. 使用 react.lazy 和 suspense 进行延迟加载
动态导入组件，减少初始加载时间。
|
1
2
3
4
5
6
7
8
9
10
|
import { lazy, suspense } from 'react';
const lazycomponent = lazy(() => import('./lazycomponent'));
const app = () => {
return (
<suspense fallback="{<div">loading...}>
<lazycomponent></lazycomponent></suspense>
);
};
|
20. 用于类型检查的 proptypes
使用 prop-types 来记录和强制执行组件 prop 类型。
|
1
2
3
4
5
6
7
8
9
|
import PropTypes from 'prop-types';
const Greeting = ({ name }) => {
return <h1>Hello, {name}!</h1>;
};
Greeting.propTypes = {
name: PropTypes.string.isRequired,
};
|
函数式组件提供了一种干净、直接的方式来构建 react 应用程序，尤其是 hooks 引入的强大功能。此备忘单提供了基本概念的快速参考，帮助您编写有效且高效的 react 代码。
