react中的render props与静态类型检验

                                                                    react中的render props与静态类型检验

render props是一种术语，指的是一种技术在react组件之间的函数中来共享代码。一个带有render props的组件接收一个函数，调用这个函数而不是去实现自己的逻辑渲染。

render props的使用例子

在这个例子中，想要去实现的功能是实时的获取到当前鼠标的位置，此时的实现方法是通过组件，是时候的改变当前的setState的值，从而在render中渲染出改变后的state的值即可。

那么如果我们在另一个组件中知道了当前鼠标的位置，又如何在另外一个组件中去表现呢？

上面这个只是使用了一个组件拆分，将获取到鼠标位置的组件方法了另外一个组件中而已。

在这个例子中，我们将展示图片的组件放在了有获取到鼠标当前位置的组件中，然后将这个组件放在最后的展示取当中，这样就实现了上面所说的这个功能。但是这只是一种静态的方式去获取，当使用了render props后，我们只需要将上面代码中的两个部分做更即可。

这种方式所实现的过程是，在最后展示的代码中去实现render props的函数的调用，将里面的Cat组件调用，最后渲染的过程就是在Cat组件中去实现的这个过程。render props最重要的过程就是知道在什么时候去执行这个函数调用

关于呈现道具需要注意的一件有趣的事情是，您可以使用带有呈现道具的常规组件来实现大多数高阶组件(HOC)。

警告：你要小心去使用render props ，在render方法中创建函数，则使用PureComponent。这是因为浅层道具比较对于新道具总是返回false，在本例中，每个渲染都会为渲染props生成一个props。

在本例中，每次<MouseTracker>呈现时，都会生成一个新函数作为<Mouse render> prop的值，从而抵消了<Mouse> extend React的效果。首先是PureComponent !
为了解决这个问题，有时候你可以把这个道具定义为一个实例方法，就像这样:

静态类型检验

静态类型检验可以在代码执行前知道你的某些类型出现的错误，还可以通过自动添加完成等功能来改进开发人员的工作流，在较大的代码库中推荐使用Flow和TypeScript来代替propsTypes

在Flow中

使用flow可以对变量，函数，组件使用一种特别的语法规则，可以提前捕获到错误，下面就对flow的基础已经语法进行讲解。

1.安装进你的项目中，有两种方式，第一： npm ，通过npm  install --save-dev  flow-bin  第二种： yarn  ，通过yarn  yarn add flow-bin，然后就在你的“script”中添加flow在你的.json文件中，添加方式如同下面所示

然后就可以执行下面的命令去提交你的流配置文件

紧接着已经编译的文件中剥离流代码

如果你使用了create-react-app，默认情况下，流注释已经被删除，因此您不需要在此步骤中执行任何其他操作。如果你是手动配置了babel在你的项目中，你就安装一个专用配置给你的flow。下面是通过yarn或者是npm安装的两种配置

然后增加flow的配置到你的Bebel配置当中，例如你配置了一个文件后缀名为.babelrc的文件，你就可以像下面的这种形式一样去使用增加你的flow配置

这将预示你将使用flow语法在你的代码中，这里需要注意的是，你不需要提前在你的react中去部署flow，因为它们两个常常是在一起被使用的，flow也能够立即明白JSX的语法。如果你不使用create react APP 或者是 Babel，你也可以使用flow-remove-types去注销掉你的流注释。

然后你就可以去运行flow,当你运行成功后就会显示下面代码部分中的第三个部分。

添加flow类型的注释

在默认的情况下，flow只检查下面这种类型的注释

通常情况下flow是放在文件的顶部，然后尝试将其放入进一些文件中，然后运行flow，看这些文件是否存在着一些问题。还有一些强制性的方式，将flow放在所有的文件中去进行检测，对于新的项目中，这种方式是合理的，但是对于现有的项目来说，这或许不太合适。下面有文档去介绍该流程。具体可以去官方文档进行查阅

TypeScript

TypeScript是被微软开发出来的一种语言，包含自己的编译器。作为一种类型化语言，TypeScript可以在构建时捕获错误和bug，这比应用程序运行的时间要早得多。可以通过React了解更多关于使用TypeScript的信息。

要使用TypeScript，你需要:
将TypeScript作为依赖项添加到项目中
配置TypeScript编译器选项
使用正确的文件扩展名
为您使用的库添加定义

使用TypeScript在create react app，首先是创建一个支持TypeScript的新项目，然后去运行，你需要执行下面的代码

你也可以去将其添加到一个已有的项目中，但是需要注意的是这个部分如同flow一样，如果你使用了create react app你就不需要做下面的这些操作。

增加TypeScript到你的项目中，同样的有下面的两种方式去进行安装

 

安装完成之后就可以去使用tsc命名，在你配置之前，将tsc增加到你的项目文件中

当你完成好此步骤后，就需要你去配置TypeScript，去告诉编译器我们对于这样的文件应该怎样去使用。这个时候你就可通过yarn和npm去运行，下面的指令就是去执行这样的过程。

之后就会去生成一个tsconfig.json的文件，随后就会有很多的完成配置过程的文件选择，在通常的情况下找寻的两个文件分别是rootDir与outDir，在这个时候编译器就会将TypeScript的文件转化成js文件，之后为了不让输出产生混淆，我们就需要去自己的目录结构进行创建，这样做的目的就是为了分清TypeScript转化的js文件与之前的js文件。通常情况下我们的项目的目录结构就应该设置成下面的这种形式。

然后就可以告诉编译器源代码在哪里，输出结果又应该在哪里。下面部分的代码所完成的功能就是这样的。

另外为了不将TypeScript生成的代码放在源代码当中，通常情况下是将build文件夹添加到.gitignore中。对于TypeScript有两种文件拓展名的形式，第一种是.ts另外一种是.tsx，第二中是包含了JSX语法的文件拓展名。

最后就是去运行TypeScript，如果没有任何的输出，就说明你上面的流程是完全正确的，你只要执行下面两种命令中的任何一条就可以了，具体情况是需要看你之前是采取怎样的安装方式。

类型声明

什么是类型声明呢，你需要对你的警告或者是错误信息给出提示，这个时候你就需要类型声明。而编译器依赖于声明文件。声明文件提供库的所有类型信息。也就是才能对你的警告或者是错误信息给出提示。下面给出了两个声明库。

bundled——库绑定了自己的声明文件。这对我们来说很好，因为我们所需要做的就是安装这个库，并且我们可以立即使用它。要检查库是否绑定了类型，可以查找index.d.ts文件在项目中。一些库会在它们的包中指定它。类型或类型字段下的json。

definitelyTyped——是一个巨大的声明库，用于不捆绑声明文件的库.声明由微软和开源贡献者众包和管理。例如，React不捆绑自己的声明文件。相反，我们可以从定义类型中得到它。为此，请在终端中输入此命令。

局部声明

在有的时候你的文件中并没有上面说到的两种方式，这个时候你就需要去使用局部声明。为了去实现这个过程，需要先去创建一个declarations.d.ts文件在源文件的根目录当中。然后你就可以进行向下面的这种形式的声明。

然后你就可以去进行检测了，具体更多的检测方法在官方上提供了一下文档让我们去查询，这些部分是如何的使用的。

还有其他静态类型的语言去编译使用，有Reason、Kotlin与Other等。