在 useState() 聲明處賦值與 useEffect()

Question

我一直在交替使用這兩種方式，但是我不確定哪一種更正確。 他們的行為似乎是一樣的，但我相信每個都有一個用例。 任何人都可以幫助我了解每種情況的正確用途是什么？

const [customer, setCustomers] = useState(props.location.state);

  useEffect(() => {
    setCustomers(props.location.state);
  }, []);

Answer 1

你通常應該堅持第一個。 調用setter的設置useState可能會導致不希望的重新渲染和性能下降。

在第一個塊中，客戶直接初始化並且沒有重新渲染。 setCustomer方法將更改 state 並重新呈現組件。 最后，整個 function 將運行兩次，您可以使用console.log進行驗證。

const [customer, setCustomers] = useState(0);

useEffect(() => {
  setCustomers(15);
}, []);

console.log(customer) // will first output 0 and then 15

Answer 2

假設在第二種情況下，您將此作為您的useState語句：

const [customer, setCustomers] = useState();

第二個在componentDidMount上設置 customer 的值。 所以在初始渲染中，您的customer變量中不會有適當的值。 但是，是的，由於useEffect中編寫的代碼，很快就會設置正確的值。

為了清除它，這里將有 2 個渲染（因為 state 變量值發生變化）。 在第一個中，情況並非如此，因為 state 變量從一開始就只有一個值。

Answer 3

第一個更有效。

const [customer, setCustomers] = useState(props.location.state);

如果您使用第二個（通過使用useEffect ），您的組件將再次重新呈現。

也就是說，您的 state 變量customer將在 DOM 最初呈現后在useEffect中更新，這將導致組件的第二次重新呈現。

但是如果你想讓customer通過props.location.state更新，你需要像下面這樣添加useEffect鈎子。

useEffect(()=> {
    setCustomers(props.location.state);
}, [props.location.state]);

Answer 4

在聲明它時設置狀態的默認值可能是 go 的更正確方法，因為它不會觸發重新渲染。

每次你調用setState時，你的組件都會被重新渲染，所以當你在useEffect中這樣做時，你會在組件安裝時觸發不必要的重新渲染，這可以通過做好 ol'

const [value, setValue] = useState(props.location.state)

雖然當然有例外和許多不同的用例，但在 useEffect 中設置初始useEffect更有用，例如，當您有期望更改的值時，無論您的組件如何（例如來自外部異步 API 調用） :

const [value, setValue] = useState(valueExpectedToChange)

useEffect(() => {
   setValue(valueExpectedToChange) // will trigger the rerender only when valueExpectedToChange changes
}, [valueExpectedToChange])