react hook是什么以及解决了哪些问题？

react hook是什么以及产生的原因

关于react hook是什么以及产生的原因，react官方已经在2018年的react conf上做了详细的说明。有兴趣的可以看官方视频React Today and Tomorrow and 90% Cleaner React With Hooks

为什么会产生react hook?

根据react官方的说法，就是class 组件太垃圾带来了很多问题。例如

1. 逻辑复用困难

2. 组件过于巨大

3. Confusing Classes

这里我其实搞不懂了，为啥class让人和电脑感到困惑了，我以为是我翻译的不行，又找到了中文的官方文档

文档上的解释是这样的

好吧，你说是啥就是啥吧，反正hook也加上了

4. 嵌套地狱

哈哈哈哈哈??????

react hook怎样解决了这些问题？

好了，既然上面提出问题了，那我们看react官方是怎么解决这些问题的吧?

针对Confusing Classes Dan大佬举了一个例子，是一个输入框的双向绑定

具体代码如下抱怨的大概是说他定义了onChange函数还要再bind一下this吧，并且当filed增多的时候，需要绑定的就更多

然后他给出了hook版本的解方案，确实简洁了不少

然后是嵌套地狱的问题

举的例子是context的使用

具体代码如下，在class组件中使用context的数据需要嵌套

然后他给出了hook版本的解方案，so nice～～～

紧接着的例子是根据name和surname的输入设置document.title的值

hooks版本

这划水的文章写的我也好累啊?

最后一个例子是在视图上显示浏览器窗口的宽度，并且当缩放浏览器的时候，数据也要发生变化

calss 组件的代码

hooks版本

关于逻辑复用

最后的最后给出了一个终极版本

react 总结

hooks确实是给react用户带来了福音啊。。。。

但是！！！如果不用react呢？比如angular?

angular实现上面的功能

ts部分

html 部分

什么？react的context共享数据的没有实现？

我太懒了。。。。但是，还是给一下代码吧?其实超级简单定义一个service就好了

最终效果

红色区域是孙子组件，和最外层的组件共享数据yellow和China

appService的代码

app组件(最外层组件)的ts代码

app组件(最外层组件)的htm代码

grand-child的ts代码

grand-child的html代码

最后欢迎大家入坑Angular