React的新旧对比与回顾

现在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;

3、兄弟组件之间的传值

状态提升

Context
关于Context的部分我都会后面进行补充的

4、props的检验
关于检验的部分，如果我们在写代码的时候并没有用到组件，也就是没有组件自带的校验的时候可以使用一下

5、还必须要提一下的是，可以通过ref来进行父子之间的传值，这个的例子我后面会进行补充

React的新旧对比与回顾相关推荐

React之新旧生命周期对比
<!DOCTYPE html> <html> <head> <meat charset="UTF-8"> <title> ...
《工业互联网行动计划》新旧对比，揭秘工业互联未来3年新格局！
近日,工信部发布印发<工业互联网创新发展行动计划(2021-2023>年)>(以下简称"计划"),是基于2018~2020年版本的下一个三年规划 . 与旧计划相比 ...
React 生命周期总结（新旧对比）
一.生命周期(旧) //案例:点击按钮加1 class Count extends React.Component{//1.构造器constructor(props){super(props)//初始 ...
GB50174-2017新旧对比
相关下载史上最全,数据中心机房标准及规范汇总(下载) 数据中心运维管理 | 资料汇总(2017.7.2版本) 欢迎大家加入"数据中心运维管理"微信群,加小编微信:suifenge ...
建设工程安全文明施工费计价管理办法新旧对比分析
React基础学习--新旧生命周期对比（二）
生命周期新旧对比 1. 图示 2. 旧版生命周期代码 <script type="text/babel">// 创建组件class Count extends Reac ...
php计算购置税1007无标题,新旧个税计算公式对比–ps:世界上最好的语言PHP
先上代码为敬<?php echo "个税计算新旧对比:\r\n"; /** * [oldMyMoney 旧版本个税计算] * @Author yangjun * @DateT ...
React 入门：对比 Reac t的新旧生命周期
文章目录如何理解"旧"与"新" 旧 - 生命周期图谱新 - 生命周期图谱过时的钩子函数新增的生命周期钩子函数改变生命周期的关键版本新旧生命周期钩子函 ...
React新旧版本生命周期对比
React新旧版本生命周期对比 ❶ 过时生命周期: ① componentWillMount ② componentWillReceiveProps ③ componentWillUpdate ❷ 即 ...