React学习笔记(2)--父子通信

父子通信

React中,通过状态来实现web页面的实时更新。但是状态的使用仅限于组件的内部。需要通过类属性来从外部向组件内传值。

类属性不需要new就可以访问,而对象属性需要new之后才可以访问。在对象之前用static修饰,则定义了一个类属性。直接通过(类名.属性)即可访问。通过类名.defaultProps可以设置类属性的默认值。

对于函数组件,无法通过this.props来传递属性,需要通过形参的形式来传递属性。

子组件的属性在子组件内部是只读的,无法修改。通过父组件的状态变量向子组件传递属性,可以降低代码的维护难度。这种子组件称之为受控组件(广义)。狭义的受控组件,以一个表单为例,表单可以看做一个小的组件,表单的内容不从状态State中读取,而是由外部输入来修改(ref),这种就称为非受控组件(狭义),反之则为受控组件。对这种狭义的受控组件,由于其值通过ref变量来传输,所以其他的表单无法同步值,比如一个非受控输入框中的内容,其他的组件只能同步一次,在输入框中改变内容后,由于是通过ref来传递数值,所以不会出发State的变化,所以Render也不会重新渲染,最终修改后的内容也不会传递到其他组件中。

通过受控组件的应用,可以通过属性来修改状态,状态的调整继而引发Render的再一次渲染,达到实时更新的目的。

关于父子通信,父组件通过属性来传值给子组件,而子组件想要传信号给父组件,需要父组件给子组件先传一个属性,属性为一个回调函数,子组件通过调用父组件传过来的父组件的回调函数,可以在父组件中执行该回调函数。通常的做法是,子组件尽量不要State,而是通过父组件的属性来传递,这样子组件比较受控。如果实在需要State,也可以在父组件中定义好,然后以属性的方式传递给子组件。

当父子通信比较麻烦的时候,可以通过给子组件赋予ref属性,从而获得子组件全部信息,然后再父组件中控制子组件,获取子组件的状态、调用子组件的函数等。这种做法总结下来就是,所有的值都是通过父组件传递,然后子组件获得了这些值以后,自己可以设计State来进行内部通信。当父组件需要获取子组件的值的时候,不再通过回调函数来获取,而是通过ref来获取子组件的全部信息。

Subscribe to JamesTsao的个人成长笔记
Receive the latest updates directly to your inbox.
Mint this entry as an NFT to add it to your collection.
Verification
This entry has been permanently stored onchain and signed by its creator.
More from JamesTsao的个人成长笔记

Skeleton

Skeleton

Skeleton