react-React深刻-一等公民-props-onChange

---

title: '[react]深刻 - 一等公民 props & onChange'
date: 2017-08-23 10:05:07
tags:

• react
• reactjs
• props
• onChange
• 框架
• redux
  categories:
• 技术

---

写在前面

这篇博客的前身是 《React 新手必须知道的10件事》，结果写着写着，「每件事」都远远超过了预计的300～500字的限制。给读者的阅读形成了极大的困扰。故将《10件事》拆开成若干篇，每一篇只讲一个主题。

正文

React 最推荐的数据交互方式是：props & onChnage。在这种交互方式里：对于一个可视组件 ComponentA，用 props 来向它发送信息，而用 onChange 回调函数来接收 ComponentA 发送的·信息。在程序世界里，咱们更喜欢把上述「交互方式」称为「接口」，虽然这个「接口」不是咱们在面向对象语言里的 interface，可是跟 interface 有着相似的功能。 咱们暂且把这个「接口规范」取名为 「props & onChange 接口规范」。

React 仍是给了另一种方法来进行数据交互：ref & method。在这种交互方式里，咱们经过 <ComponentA ref={ r => this.refOfComponentA = r } 的方式来得到 ComponentA 对象的引用，而后用 this.refOfComponentA.someMethod() 来向它发送信息。咱们把这交互方式称为 「ref & method 接口规范」。在典型的客户端开发环境里（iOS、Android、Windows PC等），这种方式更为常见，而且对函数调用更加友好，更「像」程序语言。可是，对于 React 新手，咱们强烈不建议使用这种借口规范，除非你对 React 整个机制很是了解，仍然想用它。由于它严重破坏了 React 组件的一致性。缘由有：

1. React 的可视组件的层级结通常是在 jsx 文件中以一种相似于 html 的语言来表示的，这种表示方式既方便又直观，表达力很强。在这种特殊的 jsx 语言里，「props & onChange接口规范」很容易且天然的被遵照。而若是用 「ref & method接口规范」，你不得不跳转到不少行之外，才能明白信息的传递过程，既不利于代码编写，也不利于阅读。
2. 咱们避免不了用 props 方式来进行数据传递。咱们说「避免不了」，由于不少缘由，在此仅列举两个：1、jsx 文件中，Html 内置元素只能经过 props 来传递参数；2、不少第三方库（若是咱们在开发一个大型项目，一定有不少「轮子」不用本身造），也必须经过 props 来传递参数。因此，props 不可避免；而同时存在两种接口规范，是没有意义且容易出错的。
3. 第三个缘由可能比较「经验化」。若是如今不能理解和认同，你听听就好；反正，当你使用过的优秀开源框架足够多，你确定会明白的：当你新接触一个框架时，暂时抛弃本身以往的习惯，转而遵照它的语言规范，是最好的选择。缘由很简单：
   1. 一个框架从出生到出名，必定有本身不同凡响的框架思想，才能从其余同类型框架中脱引而出。时间的验证，是有意义的。
   2. 过于轻率的使用其余的编程思想，会多处碰壁；也不利于你真正了解此框架的优点和瓶颈。