React高阶指南(中) - 《广于固志学习笔记》

flow文档资源
typescript文档资源
与其他库的集成Integrating with Other Libraries
JSX In Depth
Optimizing Performance优化性能

flow文档资源

流文档资源:(1)Flow Documentation: Type Annotations：类型注解 (2)Flow Documentation: Editors：编辑
(3)Flow Documentation: React：：反应 (4)Linting in Flow：产品在流

typescript文档资源

typescript文档：(1)TypeScript Documentation: Basic Types:基本类型
(2)TypeScript Documentation: Migrating from Javascript:从 JS 迁移
(3)TypeScript Documentation: React and Webpack

与其他库的集成Integrating with Other Libraries

反应可用于任何web应用程序。它可以嵌入到其他应用程序,小心一点,可以嵌入到其他应用程序的反应。将检查的一些比较常见的用例,关注与jQuery和骨干的集成,但同样的想法可以应用于集成组件与任何现有代码。
与DOM操作集成插件。反应不知道更改DOM之外的反应。它决定更新基于自己的内部表示,如果相同的DOM节点被另一个图书馆,反应变得困惑,无法恢复。这并不意味着它是不可能的,甚至一定很难结合反应和影响DOM的其他方式,你只需要注意每一个在做什么。
避免冲突的最简单的方法是防止反应组件更新。你可以通过渲染元素反应没有理由更新,就像一个空的< div / >。
如何处理这个问题？为了证明这一点,可以勾勒出一个包装为一个通用的jQuery插件。将附上ref根DOM元素。componentDidMount内部,将得到一个参考它所以我们可以通过jQuery插件。
阻止反应接触DOM安装后,我们将返回一个空的< div / > render()方法。< div / >元素没有属性或孩子,所以没有理由反应更新它,离开了jQuery插件免费管理DOM的一部分
注意:我们定义componentDidMount和componentWillUnmount生命周期方法。许多jQuery插件将事件监听器附加到DOM在componentWillUnmount分离是很重要的。如果插件没有提供一个清理的方法,你可能必须提供自己的,记住要删除任何注册事件侦听器插件,防止内存泄漏

函数有很多方法， ref 是挑选函数的子方法。暂时不会用到 jquery的合成。修改的是this.el.value this.el的属性。
（this.$el）=$(this.el)是jquery的做法

class Chosen extends React.Component{
  componentDidMount(){console.log(this.el);
      console.log(this.el.value);} 
  componentWillUnmout(){}
  render(){
    return(<div><select className="Chosen-select" ref={el => this.el = el}>
    {this.props.children}</select></div>);}}
function App(){
  return(<Chosen><option>1</option><option>2</option><option>3</option></Chosen>);}
ReactDOM.render(<App />, document.getElementById('root'));

console结果

"<select class='Chosen-select'><option>1</option><option>2</option><option>3</option>
</select>"
"1"

如果以后打算迁移到另一个数据管理解决方案,可能希望了解骨干集中在尽可能少的部分代码。解决方案之一是提取模型的属性作为普通数据只要它发生变化,并保持这种逻辑在一个地方。以下是一个高阶组件,提取骨架模型的所有属性状态,通过包装组件的数据。这种方式,只有高阶组件需要知道骨干模型内部,和大多数组件在应用程序可以保持骨干的不可知论者。

JSX In Depth

从根本上讲,JSX只是为反应提供了语法糖。createElement(组件,道具,…children )功能

f语句和for循环不是JavaScript中的表达式，因此不能直接在JSX中使用。相反，可以将它们放在周围的代码中

如果您已经将props作为一个对象，并且希望在JSX中传递它，那么可以使用…作为一个“扩散”操作符来传递整个props对象。这两个部分是等效的：

function App1() {return <Greeting firstName="Ben" lastName="Hector" />;}
function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;}

还可以选择组件使用的特定属性，同时使用Spread运算符传递所有其他
可以将不同类型的子元素混合在一起，这样就可以将字符串文本与JSX子元素一起使用。这是JSX类似于HTML的另一种方式，因此这既是有效的JSX又是有效的HTML

Optimizing Performance优化性能

创建一个生产建设,确保你添加这些变换(订单事项): envify变换确保设置正确的构建环境。使其 global(g)。　　uglifyify变换消除了开发进口。使它成为 global(g)。最后,结果包被输送到uglify-js碾压(读)的原因
注意: 包的名字是uglify-js,但它提供的二进制叫做uglifyjs。　　这不是一个错字
在内部，react使用了几种巧妙的技术来最小化更新UI所需的代价高昂的DOM操作的数量。对于许多应用程序，使用react将导致快速的用户界面，而无需做大量工作来专门优化性能。不过，有几种方法可以加快响应应用程序的速度。
创建React应用程序
如果您的项目是用Create React应用程序构建的，请运行：
NPM运行构建
这将在项目的build/文件夹中创建应用程序的生产版本。
请记住，只有在部署到生产环境之前才需要这样做。对于正常发育，使用NPM启动。
NPM安装—保存dev uglify js brunch
使用chrome性能选项卡分析组件
在开发模式中，可以使用受支持浏览器中的性能工具可视化组件的安装、更新和卸载方式。例如：
在Chrome时间轴中反应组件
使用devtools探查器分析组件
react dom 16.5+和react native 0.57+通过react devtools profiler在dev模式下提供增强的分析功能。可以在“介绍React Profiler”的博客文章中找到探查器的概述。youtube上也提供了分析器的视频演练。（如果尚未安装React devtools，可以在此处找到它们：Chrome浏览器扩展、火狐浏览器扩展、独立节点包）
使用不可变数据结构
不可变的.js是解决这个问题的另一种方法。它提供了通过结构共享工作的不可变、持久的集合：
不可变：一旦创建了集合，就不能在其他时间点更改它。
持久性：可以从以前的集合和突变（如set）创建新集合。创建新集合后，原始集合仍然有效。
结构共享：创建新集合时尽可能使用与原始集合相同的结构，将复制减少到最低限度以提高性能。
不变使跟踪更改变得便宜。一个更改总是会导致一个新对象，所以我们只需要检查对该对象的引用是否已更改。

const x = { foo: 'bar' };
const y = x;
y.foo = 'baz';
x === y; // true

虽然Y被编辑过，但由于它引用了与X相同的对象，所以这个比较返回true。可以使用immutable.js编写类似代码：

const SomeRecord = Immutable.Record({ foo: null });
const x = new SomeRecord({ foo: 'bar' });
const y = x.set('foo', 'baz');
const z = x.set('foo', 'bar');
x === y; // false
x === z; // true

在这种情况下，由于在对x进行赋值时返回了一个新的引用，我们可以使用引用相等性检查（x==y）来验证存储在y中的新值与存储在x中的原始值不同。
另外两个可以帮助使用不可变数据的库是无缝不可变和不可变助手。
不可变数据结构为您提供了跟踪对象更改的廉价方法，这是我们实现ShouldComponentUpdate所需要的全部内容。这通常可以为您提供良好的性能提升

创建一个生产建设,确保你添加这些插件(订单事项): 更换插件设置确保正确的构建环境。commonjs插件支持commonjs汇总。糟蹋插件压缩,导致最后的包。
webpack方法。最有效的webpack生产建设,确保这些插件包含在您的生产配置: 　　　　
```
ew webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
}),
new webpack.optimize.UglifyJsPlugin()
```
记住,只需要做生产构建。不应该应用UglifyJsPlugin或DefinePlugin与“生产”的价值发展因为他们会隐藏有用的警告,反应,使构建慢得多.

注意,数字是相对生产组件将渲染得更快。不过,这应该有助于你意识到不相关的UI更新时的错误,以及如何深,UI更新发生的频率. 生产分析束 react-dom也可以用 react-dom/ 分析。

虚拟化长列表。如果您的应用程序呈现长列表的数据(成百上千的行),我们建议使用一种技术被称为“窗口”。这种技术只让一小部分你行在任何给定的时间,并且可以显著减少所花费的时间重新呈现的组件以及创建的DOM节点的数量
避免和解。反应构建和维护的内部表示呈现UI。它包括你从组件返回的反应元素。这个表示允许反应避免创建DOM节点和访问现有的必要性之外,是可以低于JavaScript对象上的操作。有时它被称为“虚拟DOM”,但在反应本地方式一样。组件的道具或状态变化时,反应决定是否一个实际的DOM更新是必要的,通过比较新返回的元素之前呈现的一个。不相等时,反应将更新DOM。
注意，当我们输入第二个todo时，第一个todo也会在每次按键时在屏幕上闪烁。这意味着它将通过与输入一起的react重新呈现。这有时被称为“浪费”渲染。我们知道这是不必要的，因为第一个todo内容没有改变，但是react不知道这一点。

即使react只更新更改后的DOM节点，重新呈现仍然需要一些时间。在许多情况下，这不是问题，但是如果速度明显减慢，您可以通过覆盖生命周期函数shouldComponentUpdate来加快速度，这是在重新渲染过程开始之前触发的。此函数的默认实现返回true，使react执行更新

在某些情况下,如果您知道您的组件不需要更新,你可以返回false shouldComponentUpdate相反,跳过整个渲染过程,包括调用render()这个组件和下面。　　　　在大多数情况下,而不是写shouldComponentUpdate(),您可以从React.PureComponent继承。它相当于实施shouldComponentUpdate()和一个浅的比较当前和以前的道具和状态

shouldComponentUpdate(nextProps, nextState) {return true;}

shouldComponentUpdate在行动 .这是一个组件的子树。对于每一个人,并表明shouldComponentUpdate返回什么,vDOMEq表明反应呈现的元素是否等效。最后,圆的颜色表明是否组件必须和好。
由于shouldComponentUpdate为c2根的子树返回了false，因此react没有尝试呈现c2，因此甚至不必在c4和c5上调用shouldComponentUpdate。
对于c1和c3，shouldComponentUpdate返回true，因此react必须深入到叶并检查它们。对于c6，shouldComponentUpdate返回true，并且由于呈现的元素不是等效元素，因此react必须更新dom。
最后一个有趣的例子是C8。react必须呈现此组件，但由于它返回的react元素与以前呈现的元素相同，因此不必更新DOM。
注意，react只需要对c6进行dom突变，这是不可避免的。对于c8，它通过比较渲染的react元素来释放，对于c2的子树和c7，它甚至不必像我们在shouldComponentUpdate上释放的那样比较元素，并且不调用render.

这可能是一个问题更复杂的数据结构。例如,假设你想要一个ListOfWords组件呈现一个以逗号分隔的单词,和父母WordAdder组件允许您单击一个按钮一个词添加到列表中。这段代码不能正常工作.

问题是,PureComponent将做一个简单的对比新旧this.props.words的价值观。因为这段代码中的变异词数组 handleClick WordAdder方法,新旧this.props的价值观。的话会比较平等,即使实际的单词数组中已经改变了。 ListOfWords因此不会更新,尽管它应该呈现新单词

class ListOfWords extends React.PureComponent {
render() {return <div>{this.props.words.join(',')}</div>;}}
class WordAdder extends React.Component {
constructor(props) {super(props);
   this.state = {words: ['marklar']};}
handleClick =()=> {// This section is bad style and causes a bug
  const words = this.state.words;
  words.push('marklar');
  this.setState({words: words});}
render() {return (<div><button onClick={this.handleClick} />
   <ListOfWords words={this.state.words} /></div>);}}
ReactDOM.render(<WordAdder/>,document.getElementById('root'));

主要问题:第七行的 const words 对 this.state.words只是一个引用，并没有改变它的长度 length。因为引用了，所以会显示单词。
具体解决办法：先将 const words引用一个空，把 this.state.words.length 进行一个 let 的循环，把的 words的 length 更新push，然后显示 length

class ListOfWords extends React.PureComponent {
  render() {return <div>{this.props.words.join(',')}</div>;}}
class WordAdder extends React.Component {
  constructor(props) {super(props);
    this.state = {words: ['marklar']};}
  handleClick = () => {// This section is bad style and causes a bug
    const words = [];
    for(let i = 0; i < this.state.words.length; i++){words.push(this.state.words[i])}
    console.log(`words length is ${words.length}`);
    words.push('marklar');
    console.log(`words length is ${words.length}`);
    this.setState({words: words});}
  render() {return (<div><button onClick={this.handleClick}>Button</button>
     <ListOfWords words={this.state.words} /></div>);}}
ReactDOM.render(<WordAdder />, document.getElementById('root'));

执行结果：点击六次，显示长度为6

Portals(门户)入口

注意: 使用门户时,记住键盘焦点管理非常重要。模态对话框,确保每个人都可以与之交互的wai - aria模态创作实践。
事件冒泡通过门户网站。尽管门户可以在DOM树,它像一个正常的孩子在其他方面的反应。功能,如环境完全相同的工作不管孩子是一个门户,门户仍然存在的反应树无论在DOM树中的位置。这包括事件冒泡。发射的一个事件在一个门户将传播到祖先的包含反应树,即使这些元素没有祖先的DOM树
在# app-root父组件能够捕获一个未捕获,从兄弟节点# modal-root冒泡事件
捕捉事件冒泡从门户在父组件允许更灵活的抽象的发展本身是不依赖于门户网站。举个例子,如果你让一个<模态/ >组件,家长可以捕获的事件无论使用门户实现的

React without ES6

在反应组件声明为ES6类、方法为常规ES6类遵循相同的语义。这意味着他们不自动绑定到实例。你必须显式地使用.bind(这个)在构造函数中
createReactClass()可以绑定所有方法:

var SayHello = createReactClass({
  getInitialState: function() {return {message: 'Hello!'};},
  handleClick: function() {alert(this.state.message);},
  render: function() {
    return (<button onClick={this.handleClick}>Say hello</button>);}});

实验和语法可能会改变,或者提议可能没有进入语言。如果你使用它安全,你有几个选择:
结合方法在构造函数中。使用箭头,例如onClick= {(e)=> this.handleClick(e)}。继续使用createReactClass。
注意: ES6推出没有任何mixin的支持。因此,当你使用不支持mixin和ES6类反应。在代码库使用mixin,发现了许多问题,不建议在新代码中使用它们。
有时非常不同的组件可以共享一些常见的功能。这是有时被称为横切关注点。createReactClass允许您使用遗留混合系统。一个常见的用例是希望在时间间隔上更新自己的组件。使用setInterval（）很容易，但是当您不再需要它来保存内存时，取消间隔是很重要的。React提供了生命周期方法，让您知道何时要创建或销毁组件。让我们创建一个简单的mixin，它使用这些方法提供一个简单的setInterval（）函数，当您的组件被破坏时，该函数将自动被清除。
如果一个组件是使用多个混合和一些混合定义相同的生命周期方法(即几个mixin想做一些清理时,组件被销毁),所有的生命周期方法是有保证的。方法定义在mixin运行mixin的顺序列出,紧随其后的是一个方法调用的组件。

React without JSX

使用反应JSX不是一个要求。使用反应没有JSX尤其方便当你不想设置编译你的构建环境。每个JSX元素只是语法糖打电话来反应。createElement(组件、道具…孩子)。所以,与JSX也可以做任何你能做的只有纯JavaScript

class Hello extends React.Component {
    render() {return <div>Hello {this.props.toWhat}</div>;}}
ReactDOM.render(<Hello toWhat="World" />,document.getElementById('root'));

可以编译,不使用JSX:

class Hello extends React.Component {
  render() {return React.createElement('div', null, `Hello ${this.props.toWhat}`);}}
ReactDOM.render(React.createElement(Hello, {toWhat: 'World'}, null),
  document.getElementById('root'));

组件可以提供一个字符串,或作为反应的一个子类。无状态的组件的组件,或者一个普通函数。　　　　如果你厌倦了输入的反应。createElement这么多,一个常见的模式是指定一个速记

const e = React.createElement;
ReactDOM.render(e('div', null, 'Hello World'),document.getElementById('root'));

如果你使用这个简写形式反应。createElement,几乎没有JSX一样方便使用的反应。或者可以参考社区项目如react-hyperscript和hyperscript-helpers提供一个含混的语法

Reconciliation和解

react提供了一个声明性API，这样就不必担心每次更新都会有什么变化。这使得编写应用程序更加容易，但在react中如何实现这一点可能并不明显。Reconciliation解释了在React的“diffing”算法中所做的选择，以便组件更新可以预测，同时对高性能应用程序来说足够快
当你使用的反应,在单个时间点你能想到的render()函数创建一个树的反应元素。下一个状态或道具更新,使()函数将返回一个不同的反应元素树。反应然后需要弄清楚如何有效地更新UI与最近的树。有一些通用的解决方案,此算法生成最小数量的问题操作将一棵树到另一个。然而,最先进的算法复杂性的顺序的O(n3),其中n是树中元素的数量
当我们使用这种反应,显示1000个元素需要十亿年订单比较。这是太贵了。相反,反应实现了启发式O(n)的算法基于两个假设: 两个元素的不同将产生不同的树。子元素的开发人员可以暗示可能不同呈现稳定的一个关键支柱。在实践中,这些假设是有效的,几乎所有的实际用例。
只要根元素有不同的类型,反应将拆除老树和从头构建新的树，这些将导致一个完整的重建。当拆除一棵树,老DOM节点被破坏。组件实例接收componentWillUnmount()。当建立一个新的树,新的DOM节点插入到DOM中。组件实例接收componentWillMount()然后componentDidMount()。任何state的老树。任何组件下面的根也会卸载,毁了自己的state。这将摧毁旧的counter和重新安装一个新的。

<div><Counter /></div>
<span><Counter /></span>

通过比较这两个元素,知道反应只在底层修改className DOM节点。

<div className="before" title="stuff" />
<div className="after" title="stuff" />

这两个元素之间的转换时,反应只知道修改颜色风格,而不是fontWeight。在处理DOM节点,然后递归在孩子们的反应

<div style={{color: 'red', fontWeight: 'bold'}} />
<div style={{color: 'green', fontWeight: 'bold'}} />

[
]()
[
]()

当一个组件更新,实例保持不变,因此在呈现状态维护。反应更新道具底层组件实例匹配的新元素,并调componentWillReceiveProps()和componentWillUpdate底层实例上()。接下来,render()方法被调用之前和diff算法是递归的结果和新结果

<ul><li>Duke</li><li>Villanova</li></ul>
<ul><li>Connecticut</li><li>Duke</li><li>Villanova</li></ul>

为了解决上面代码性能低下的问题,支持反应的一个关键属性。当孩子有钥匙,使用匹配的关键反应孩子在原来的树孩子在随后的树。例如,添加一个关键低效上面例子可以使树转换效率

<ul><li key="2015">Duke</li><li key="2016">Villanova</li></ul>
<ul><li key="2014">Connecticut</li><li key="2015">Duke</li>
        <li key="2016">Villanova</li></ul>

作为最后的手段,可以通过一个项目的索引数组的键。这可以工作得很好,如果物品没有重新排序,但重组将是缓慢的。
重新排列也会导致索引被用作键时组件状态的问题。根据他们的关键组件实例更新和重用。如果关键是一个索引,一个项目的变化。因此,组件状态为不受控制的输入可以混合和更新以意想不到的方式。

权衡取舍。重要的是要记住，协调算法是一个实现细节。react可以在每个操作上重新发送整个应用程序；最终结果将是相同的。要明确一点，在此上下文中的rerender意味着调用所有组件的render，但并不意味着react将卸载并重新装载它们。它只适用于遵循前面章节中所述规则的差异。
我们定期改进启发式方法，以便更快地处理常见用例。在当前的实现中，您可以表示一个事实，即子树已经在其兄弟树之间移动，但是您不能告诉它已经移动到了其他地方。该算法将重传整个子树。

因为反应依赖于启发式方法，如果不满足它们背后的假设，性能将受到影响：
(1)该算法不会尝试匹配不同组件类型的子树。如果您看到自己在两个输出非常相似的组件类型之间进行切换，您可能希望使其成为相同的类型。实际上，我们还没有发现这是一个问题。
(2)密钥应该是稳定的、可预测的和唯一的。不稳定的键（如math.random（）生成的键）将导致许多组件实例和DOM节点被不必要地重新创建，这可能导致性能下降并在子组件中丢失状态.

Def引入and the DOM

有几个使用 ref 的例子:管理重点,文本选择,或媒体回放。　　触发命令动画。　　集成与第三方DOM库。　　
避免使用 Ref 可以做任何声明。
不要过度使用 Ref。你的第一个倾向可能是使用refs在你的应用程序中“让事情发生”。类似情况请花点时间仔细考虑一下在组件层次结构中应该在哪里拥有状态。通常很明显，拥有该状态的适当位置在层次结构中处于更高的级别。
ref属性是用于HTML元素时,ref在构造函数中创建与React.createRef()接收底层DOM元素作为当前的财产。ref属性时使用一个自定义类组件,裁判对象接收到安装的组件作为当前实例。你可能不会使用ref属性的功能组件,因为他们没有实例。
向父组件公开DOM引用
在极少数情况下，可能希望从父组件访问子节点的DOM节点。通常不建议这样做，因为这样会破坏组件封装，但有时它对于触发焦点或测量子DOM节点的大小或位置很有用。
虽然可以向子组件添加一个引用，但这不是一个理想的解决方案，因为只会得到一个组件实例，而不是一个DOM节点。此外，这不适用于函数组件。
如果使用React 16.3或更高版本，建议在这些情况下使用Ref转发。引用转发允许组件选择将任何子组件的引用公开为自己的引用。可以在引用转发文档中找到一个详细的示例，说明如何将子节点的DOM节点公开给父组件。
如果使用的是React 16.2或更低版本，或者如果需要比Ref Forwarding提供的更大的灵活性，则可以使用此替代方法，并将Ref明确地作为另一个命名的prop传递。
如果可能，建议不要公开dom节点，但它可以是一个有用的转义图案填充。注意，这种方法要求向子组件添加一些代码。如果您对子组件实现完全没有控制权，那么最后一个选项是使用finddomnode（），但是在strictmode中不鼓励使用它，并且不推荐使用它。
回调参考
react还支持另一种设置refs的方法，称为“回调refs”，它可以在设置和取消设置refs时提供更精细的粒度控制。
不是传递由createRef（）创建的ref属性，而是传递一个函数。函数接收react component实例或html dom元素作为其参数，可以在其他地方存储和访问

React还支持另一种参组称为“参回调”,使更多的精密控制当参设置和设置。而不是通过ref属性由createRef(),您传递一个函数。函数接收组件实例反应或HTML DOM元素作为它的参数,可以存储和访问的地方。
如果你使用过的反应,你可能会熟悉老API的ref属性是一个字符串,如“textInput”,作为this.refs.textInput访问DOM节点。最好不要使用它,因为字符串 ref有问题,被认为是遗产,很可能在将来的版本中删除。
警告与回调参。如果裁判回调被定义为一个内联函数,它将被调用两次更新,首先与零,然后再次与DOM元素。这是因为一个新实例的函数创建与每个渲染,所以反应需要清晰的老裁判和设置新的。你可以避免这种通过定义裁判调绑定方法的类,但是请注意,在大多数情况下不重要。

render props渲染道具

“渲染道具”：反应组件之间共享代码使用道具的值是一个函数。组件的呈现道具接受一个函数返回一个元素并调用它,而不是实现自己的反应呈现逻辑
库使用渲染道具包括路由器 router和 downshift 减速反应
记住，实际上不需要在JSX元素的“属性”列表中命名子属性。相反，您可以直接将它放在元素中！

<Mouse>{mouse => (<p>The mouse position is {mouse.x}, {mouse.y}</p>)}</Mouse>

由于这种技术有点不寻常，所以在设计这样的API时，您可能希望显式地声明子类应该是PropTypes中的函数。

Mouse.propTypes = {children: PropTypes.func.isRequired};

慎重使用渲染道具。使用渲染道具可以否定来自使用反应的优势。PureComponent如果您创建的函数在一个渲染方法。这是因为浅道具比较将始终返回假新道具,并且每个渲染在这种情况下将生成一个新值呈现道具。

Static 静态 Type Checking

流是一个静态类型检查器为你的JavaScript代码。它是发达在Facebook和常用于反应。它让你注释的变量、函数和组件与一种特殊的语法,反应和早期发现错误。　　　　
使用流需要: 作为一个依赖流添加到项目。确保流语法是剥夺了编译后的代码。添加类型注解和运行流程检查他们。
注意: 流不需要预设反应,但他们通常一起使用。流本身理解JSX语法的。
流文档资源:(1)Flow Documentation: Type Annotations：类型注解 (2)Flow Documentation: Editors：编辑
(3)Flow Documentation: React：：反应 (4)Linting in Flow：产品在流

TypeScript 是由微软开发的编程语言。JavaScript是一个类型的超集,包括自己的编译器。作为一个类型语言,打印稿可以捕获错误和缺陷在构建时,早在你的应用。

使用打印稿,需要: 打印稿的依赖关系添加到您的项目、配置打印稿编译器选项、使用正确的文件扩展名、添加定义库使用

注意: 如果你使用创建应用程序反应,可以跳过一些方法。它描述了手工设置并不适用于创建应用程序用户反应。

rootdir和outdir。编译器将以其真正的方式接收typescript文件并生成javascript文件。但是，我们不想与源文件和生成的输出混淆。

我们将分两步解决这一问题：首先，让我们这样安排我们的项目结构。我们将把所有源代码放在SRC目录中。

package.json
├── src
│   └── index.ts
└── tsconfig.json

接下来,我们将告诉编译器源代码和输出应去的地方

// tsconfig.json
{"compilerOptions": {
    // ...
    "rootDir": "src",
    "outDir": "build"
    // ...},}

在typescript有2个文件扩展名: .ts是默认的文件扩展名,而.tsx是一种特殊的含有JSX扩展用于文件。
typescript文档：(1)TypeScript Documentation: Basic Types:基本类型
(2)TypeScript Documentation: Migrating from Javascript:从 JS 迁移
(3)TypeScript Documentation: React and Webpack

Reason不是一门新语言;这是一个新的语法和工具链由一些久经沙场的语言,OCaml。Reason给OCaml面向JavaScript程序员熟悉的语法,和迎合现有NPM /纱工作流的人已经知道。Reason是发达在Facebook,用于一些信使等产品。还有些实验但专用反应绑定由Facebook和一个充满活力的社区。
JetBrains开发的Kotlin是一种静态类型语言。它的目标平台包括JVM,Android,LLVM,JavaScript。JetBrains开发和维护几个工具专门为社区反应:反应绑定以及创建Kotlin反应应用。后者可以帮助你开始构建应用程序与Kotlin React没有构建配置。

Strict code 严格模式

StrictMode是高亮显示的工具在一个应用程序中潜在的问题。像碎片一样,StrictMode不呈现任何可见的UI。它激活附加检查和警告的后代。
注意: 严格模式检查仅在开发模式下运行;他们不影响生产。
StrictMode目前有助于: 确定组件与不安全的生命周期、警告遗留字符串ref API的使用、警告弃用findDOMNode使用、检测意想不到的副作用、检测遗留上下文API 。额外的功能将被添加在未来版本的反应。
注意: 参回调将继续支持除了新的createRef API。不需要更换回调参你的组件。他们更灵活,所以他们仍将作为一个高级功能
渲染阶段生命周期包括以下类组件方法：
构造函数、组件将安装、组件将接收道具、组件将更新、从属性获取派生状态、应更新组件、提供。
setstate updater函数（第一个参数）
严格模式不能自动为您检测副作用，但它可以帮助通过使它们更具确定性来发现它们。这是通过故意重复调用以下方法来实现的：类组件构造函数方法、渲染方法、setstate updater函数（第一个参数）、静态GetDerivedStateFromProps生命周期