ReactJS学习笔记 (四)Data Flow

Sun 06 January 2019 / In categories Web

ReactJS

ReactJS学习笔记系列。

在父子Component之间传递状态

前面说到每个React Component有两个特殊的属性:props和state。前者用来接收外部输入,以便生成相应的React Element;后者是私有的,用来保持内部状态的。

现在有一个问题,如果一个Component依赖于它的子Component的状态的话,该怎么处理?

答案可以参考React的这个例子Lifting State Up。这个例子中实现了一个温度计算器,其中有几个相关的Component:

  • 一个顶层的Component,表示温度计算器
  • 一个子Component,用来表示温度传感器
  • 一个子Component,显示华氏温度
  • 一个子Component,显示摄氏温度

温度传感器采集到的温度,需要传给华氏温度显示器和摄氏温度显示器。这个总协调是在温度计算器中进行的,温度计算器在创立温度传感器这个子Component的时候,在相应的props里面传入一个回调函数。然后,有温度更新的时候,温度传感器通过这个回调函数来通知顶层的温度计算器,接着温度计算器再通知两个温度显示器来更新读数(通过改变温度显示器的输入参数props)。

从上面的例子我们可以看出一些结论:

  • React Component的组织结构是树形的。虽然这棵树上的每个Component的state是私有的,但是每个Component可以修改传递给其子Component的参数props,从而影响子Component的状态。打一个形象的比喻,数据流向瀑布一样,从顶层的Component向下,流向子Component。
  • Props中传递的参数不仅可以是某些值,也可以是一个函数(就像前面例子中的回调函数),甚至可以是一个React Element。

参考: top-down data flow

Controlled Components

在处理HTML的Form元素的时候,React遇到了一点小问题,主要来针对那些<input>或者<textarea>等需要输入的元素,这些元素自己保有内部状态。

举个例子,网页上有一个<input>元素,你在里面输入你的用户名:

  • 当你敲键盘往<input>输入一个字符的时候,这个字符被保存在<input>的内部状态中,并在界面上显示出来
  • 然后浏览器触发一个事件,来通知React这个变化。对于React来说,这个事件其实有点晚了,因为事件已经生效了,React不能通过preventDefault()这个操作来阻止事件的生效。

React的Forms文档中描述了一种办法,来应对上面的情况。这种办法就是让自己成为single source of truth。简单的说,当React收到<input>值变化的消息时,先把值记到自己的状态中,然后用自己状态的中值再次更新这个<input>元素。最终的结果是React Element和<input>的状态获得了同步,副作用是<input>被更新了两次,一次是事件触发前,一次是React收到事件之后。这样看起来<input>被React控制了,那么这个Component可以叫做Controlled Component。

并不是所有的Form元素都要做成Controlled Component,像<input type="file" />这种只读的,可以不用去控制它。React支持uncontrolled components.

参考: Formik是一个第三方库,提供完整的表单处理功能。

(本篇完)

Load Disqus Comments