react 中变量和函数放在函数组件内还是组件外
一、在内部的情况
1. 状态相关变量（使用`useState`或`useReducer`）
变量的变化会导致组件重新渲染，应放在内部。
import { useState } from "react";
const CounterComponent = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};2. 仅在组件内部使用的辅助函数
如数据格式化、事件处理等，应该放在组件内部。
import { useState } from "react";
const FormComponent = () => {
const [inputValue, setInputValue] = useState("");
const validateInput = () => {
return inputValue.length > 0;
};
const handleSubmit = () => {
if (validateInput()) {
// 提交表单逻辑
}
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
<button type="submit">Submit</button>
</form>
);
};3. 依赖组件状态或`props`的函数
如果一个函数的执行依赖于组件的状态或者`props`，那么这个函数应该放在组件内部。
import { useState } from "react";
const DataListComponent = () => {
const [filterText, setFilterText] = useState("");
const dataList = [
{ name: "John", age: 30 },
{ name: "Jane", age: 25 },
// 更多数据
];
const filteredData = dataList.filter((item) =>
item.name.includes(filterText)
);
return (
<div>
<input
type="text"
value={filterText}
onChange={(e) => setFilterText(e.target.value)}
/>
<ul>
{filteredData.map((item) => (
<li key={item.name}>
{item.name} - {item.age}
</li>
))}
</ul>
</div>
);
};二、在外部的情况
1. 全局配置或常量
如果一个变量是全局配置，如 API 端点的 URL、主题颜色等常量，并且不依赖于组件的特定状态或`props`，可以放在组件外部。
const API_URL = "https://api.example.com";
const THEME_COLOR = "red";
const MyComponent = () => {
// 组件内部可以使用API_URL和THEME_COLOR
return <div>{/* 组件内容 */}</div>;
};2. 工具函数（不依赖组件特定状态和`props`）
如果一个函数是通用的工具函数，不依赖于组件的状态或`props`，并且可能在多个组件中使用，应该放在组件外部。
const formatDate = (date) => {
const options = { year: "numeric", month: "long", day: "numeric" };
return new Date(date).toLocaleDateString(undefined, options);
};
const MyComponent = () => {
const someDate = new Date();
const formattedDate = formatDate(someDate);
return (
<div>
<p>{formattedDate}</p>
</div>
);
};3. 组件外部状态管理
存储全局状态的变量和用于操作这些状态的函数
import { createStore } from "redux";
const counterReducer = (state = 0, action) => {
switch (action.type) {
case "INCREMENT":
return state + 1;
case "DECREMENT":
return state - 1;
default:
return state;
}
};
const store = createStore(counterReducer);
const incrementAction = () => {
return { type: "INCREMENT" };
};
const MyComponent = () => {
const count = useSelector((state) => state);
const dispatch = useDispatch();
const handleIncrement = () => {
dispatch(incrementAction());
};
return (
<div>
<p>Count: {count}</p>
<button onClick={handleIncrement}>Increment</button>
</div>
);
};`store`、`counterReducer`和`incrementAction`放在组件外部，而组件内部通过`useSelector`和`useDispatch`来与外部状态进行交互。
原文地址：https://blog.csdn.net/weixin_64684095/article/details/144148493
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！