React中,通过状态来实现web页面的实时更新。但是状态的使用仅限于组件的内部。需要通过类属性来从外部向组件内传值。
类属性不需要new就可以访问,而对象属性需要new之后才可以访问。在对象之前用static修饰,则定义了一个类属性。直接通过(类名.属性)即可访问。通过类名.defaultProps可以设置类属性的默认值。
对于函数组件,无法通过this.props来传递属性,需要通过形参的形式来传递属性。
子组件的属性在子组件内部是只读的,无法修改。通过父组件的状态变量向子组件传递属性,可以降低代码的维护难度。这种子组件称之为受控组件(广义)。狭义的受控组件,以一个表单为例,表单可以看做一个小的组件,表单的内容不从状态State中读取,而是由外部输入来修改(ref),这种就称为非受控组件(狭义),反之则为受控组件。对这种狭义的受控组件,由于其值通过ref变量来传输,所以其他的表单无法同步值,比如一个非受控输入框中的内容,其他的组件只能同步一次,在输入框中改变内容后,由于是通过ref来传递数值,所以不会出发State的变化,所以Render也不会重新渲染,最终修改后的内容也不会传递到其他组件中。
通过受控组件的应用,可以通过属性来修改状态,状态的调整继而引发Render的再一次渲染,达到实时更新的目的。
关于父子通信,父组件通过属性来传值给子组件,而子组件想要传信号给父组件,需要父组件给子组件先传一个属性,属性为一个回调函数,子组件通过调用父组件传过来的父组件的回调函数,可以在父组件中执行该回调函数。通常的做法是,子组件尽量不要State,而是通过父组件的属性来传递,这样子组件比较受控。如果实在需要State,也可以在父组件中定义好,然后以属性的方式传递给子组件。
当父子通信比较麻烦的时候,可以通过给子组件赋予ref属性,从而获得子组件全部信息,然后再父组件中控制子组件,获取子组件的状态、调用子组件的函数等。这种做法总结下来就是,所有的值都是通过父组件传递,然后子组件获得了这些值以后,自己可以设计State来进行内部通信。当父组件需要获取子组件的值的时候,不再通过回调函数来获取,而是通过ref来获取子组件的全部信息。