时间戳

首页 > 解决方案 > React state 和 React useEffect 的区别

reactjs - React state 和 React useEffect 的区别

问题描述

我对 React 很陌生，想掌握 React 状态和 React 使用效果的概念。有人可以解释这两者之间的区别吗？最好好像你会向一个三岁的孩子解释？:D

谢谢！

标签： reactjs

解决方案

State意思是了解自己。作为一个组件，要定义一个行为，您需要跟踪一些事情。这些存储在State

UseEffect意味着对状态变化做出反应。这可能以多种样式发生。

  • 处理所有更改
  • 仅处理对此行为的更改
  • 仅第一次处理。

UseEffect还可以提供清理功能，可用于清理某些资源。

例如，拿一个复选框。单击时，您需要选中或取消选中它。但是你怎么知道什么时候该做什么呢？这就是状态发挥作用的地方。您存储当前行为并切换它。

const { useState, useEffect } = React;

const MyCheckBox = (props) => {
  const [ checked, setChecked ] = useState(false);
  
  useEffect(() => {
    console.log(checked);
  }, [ checked ])
  
  return (
    <div>
      <input type='checkbox' value={ checked } onClick={ () => setChecked(!checked) } /> Test
    </div>
  )
}

ReactDOM.render(<MyCheckBox />, document.querySelector('.content'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>

<div class='content'></div>

合适的用例：

假设您需要创建一个地址表单。它将有：

  • 国家选择器
  • 状态选择器
  • 城市选择器
  • 具体地址部分。

现在City依赖于State和State依赖于Country。所以，你可以有类似的东西：

  • 在页面加载时呈现CountryselectedCountry字段，状态为. 默认为空。
  • 现在改变这个国家，你可以渲染状态字段。现在selectedCountry可以从countryField的状态作为道具传递。在这里，useEffect您可以加载必要的状态，一旦加载，您就不需要流，因此可以将其销毁cleanupFunction
  • 城市领域也可以这样做。

推荐阅读