现在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来进行父子之间的传值,这个的例子我后面会进行补充