React的新旧对比与回顾_react各版本更新-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40957332/article/details/120299456

本文主要介绍了React开发中类组件的基本特性，包括需要继承React.Component并实现render方法。此外，详细阐述了受控组件和非受控组件的区别，受控组件通过setState管理状态，而非受控组件利用ref直接获取DOM值。接着，讲解了React组件间通信的常见方法，如props传递、回调函数、状态提升以及使用Context。最后提到了props验证和通过ref进行父子组件通信的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在React版本还在不断的更新，对于我这种只是中途学了react，对react之前的版本没有太多了解的人，可能又需要补充一些知识了，以下是我需要补充学习的一些知识

类组件的特点

类组件应该继承React.Component父类
类组件必须提供render函数

受控组件

HTML中的表单元素是可输入的，也就是有自己的可变状态
react中可变状态通常保存在state中，并且只能通过setState()方法来修改

<input type="text" value={this.state.txt} onChange={e => this.setState({txt:e.target.value})} />

state = {txt: ''}

非受控组件

借助于ref，使用原生DOM方式来获取表单元素值
ref的作用：获取DOM或组件

this.txtRef = React.createRef()
<input type="text" ref={this.txtRef} />

react组件传值的方法

1、父组件传递数据给子组件

通过props传值
这个比较简单，大家可以自己写一写简单的例子

2、子组件给父组件传值
还是通过props来进行的，不过是通过两者之间的方法去完成的

import * as React from 'react';
type ChildProps = {
  Click1: (params: string) => void;
};
const Child: React.FC<ChildProps> = (props) => {
  const { Click1 } = props;

  return <div onClick={() => Click1('hksndls')}>测试</div>;
};
const App: React.FC = () => {
  const [show, setShow] = React.useState<string>();
  const testRef = (data: string) => {
    console.log(data);
    setShow('hijo');
  };
  return (
    <div>
      {show}
      <Child Click1={testRef} />
    </div>
  );
};

export default App;