尝试使用 useEffect 钩子实现此功能

Question

我只是在玩 React 钩子以更好地理解它，最终得到了下面提到的这个用例。

所以我想要的是示例组件在第一次渲染时显示文本的大写值，否则它收到的确切文本值

现在要实现这一点，我必须使用两个useEffect

。

1. 使第一个呈现的文本值大写
2. 在道具更改/更新时更新文本值

我意识到使用这种方法我的状态(我认为(将更新两次，即通过两个 useEffect 钩子。此外，我必须保持效果钩子的相同顺序，因为它们按序列运行，并且更改序列会使第一个渲染吐出文本值的正常大小写

还有什么(更好的(方法来实现这一目标？

const { useState, useEffect } = React;
const { render } = ReactDOM;
const upperCase = str => str.toUpperCase();
const Sample = ({ text }) => {
const [state, setState] = useState(upperCase(text));

useEffect(() => {
setState("text");
}, [text]);

useEffect(() => {
setState(upperCase(text));
}, []);
return (
<div>
<p>{state}</p>
</div>
);
};
const App = () => {
const [state, setState] = useState("Sample");
return (
<div>
<Sample text={state} />
{state}
<input value={state} onChange={e => setState(e.target.value)} />
<h3>App Component</h3>
</div>
);
};
render(<App />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script>

Answer 1

我相信更好的选择是这样做：

const Sample = ({ text }) => {
const ref = useRef(false);
useEffect(() => {
ref.current = true;
}, [text]);
return (
<div>
<p>{ref.current ? text : text.toUpperCase()}</p>
</div>
);
};

您将通过检查值ref.current来知道这是否是第一次渲染。

Answer 2

只需根据文本更改执行 1 个 useEffect，如下所示：

const Sample = ({ text }) => {
const [state, setState] = useState(upperCase(text));
useEffect(() => {
if (text !== state) setState(upperCase(text));
}, [text]);
return (
<div>
{console.log(state)}
<p>{state}</p>
</div>
);
};