误解反应。 FC与类组件交互

Posted 2023-02-23

【中文标题】误解反应。 FC与类组件交互

【英文标题】：Misunderstanding React. FC and class component interaction

【发布时间】：2020-12-11 04:29:21

【问题描述】：

我是 React 新手，有些东西不懂。我有两个组件：父功能组件和子类组件。假设，从 FC 我需要从 useState 钩子传递非常简单的数组。当在构造函数的类组件中时，我尝试注销道具 - 结果是空数组。但在组件中成功渲染数组项。如果我不使用 - useState 挂钩并传递现有数组 - console.log(props) 结果该数组。为什么会发生？我认为它与异步操作相关，但是如果需要根据道具在构造函数中定义初始状态怎么办？由于 props undefined ，我不能这样做。 Сan你帮我弄清楚

const FunctionalComponent = () => 
   const [state, setState] = useState([]);

   useEffect(() => 
      setState(['Jim', 'Bob', 'Tom']);
   , []);

   return (
      <div>
         <ClassComponent names=state />
      </div>
   );


// And class component

class ClassComponent extends React.Component 
  constructor(props) 
    super(props);
    this.state = 
      // Some state ...
    ;

    console.log(props); --- // []

  
  render() 
    const  names  = this.props;
    return <div>names</div>;  -- // renders items
  

https://codesandbox.io/s/props-to-class-component-from-usestate-5z5k3?file=/src/index.js

【问题讨论】：

那可能是因为当你 console.log 它的状态是 [] 但是当数据改变时更新 dom 但不刷新整个组件

【参考方案1】：

您可以看到类组件如何呈现正确的数据，但console.log 输出不参考它们。那是因为创建和更改状态是异步操作。要查看 props 是如何变化的，您必须对 FC 使用 useEffect，对类组件使用 componentDidUpdate。

class Counter extends React.Component 
  constructor(props) 
    super(props);
  
  componentDidUpdate() 
    console.log(this.props.names)
  
  render() 
    const  names  = this.props;
    return <div>names</div>;
  

或者你可以将你的 console.log 放在渲染部分：

render() 
  console.log(this.props.names)
  const  names  = this.props;
  return <div>names</div>;

如果你想console.log类组件的新状态，使用回调函数作为setState的第二个参数，如下所示：

setState(counter: this.counter + 1, ()=>console.log(counter))

否则，它会显示之前的状态值。

【讨论】：

感谢您的回答。现在我看到了区别。最佳实践是什么 - 如果我需要从道具初始化状​​态？

【参考方案2】：

您的初始状态是[]，由useState 定义。在此状态下，功能组件最初会被渲染，它还会以[] 作为初始道具渲染ClassComponent。这就是传递给构造函数的内容。

之后不再调用构造函数。相反，新的props 将只分配给组件。