突然觉得好难哇，然后就是一个人苦苦用这win系统，然后一回头看到大家都是linux，感觉被孤立了（再加上一些无奈的原因，又不能重装系统。顺便在开头表扬一下，刚刚发现这个新的编辑器每隔半分钟左右似乎开始自动保存了，(*^▽^*)……算了，我还是记着随时保存吧。顺便再提出一个很好的解决强迫症们换行问题的方法，就是先随手打个字，然后把光标移到字的前面，再按回车就好了）
-
外文名
- React 公 司
-
作 用
- 架设Instagram 的网站 特 点
- 声明式设计、高效、灵活
0.预备知识
1.你们最喜欢的Hello World
The easiest way to get started with React is to use this Hello World example code on CodePen. You don’t need to install anything; you can just open it in another tab and follow along as we go through examples. If you’d rather use a local development environment, check out the Installation section.
The smallest React example looks like this:
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
目前有哪些流行的组件化框架？
我们现在开发Web应用，一般也不会从0开始，通常是选取一个核心框架（库），然后在此基础上确定一些规则，逐步构建外围体系，现在比较火的有React，Angular，Vue，Polymer等。
“MV*”：Angular，Vue等
“反应式”：React，Reactive等
标准增强：Polymer
几个流派各自特点是什么？
MV*: 分层，绑定
React: 组件化，单向数据流
React中一般的组件相当于MVVM流派中的什么？
以上提到的几个东西，在组件化这块，可能争议最大的是Angular，因为Angular 1.x的官方指引中，并未在组件化这个方向上作一些指导，也没有提倡，甚至连建议都没有，而React和Polymer是天然组件化的，Vue提供的文档里以很大篇幅详细说明了组件化的机制和实践方式。
但是，这并不是说，Angular 1.x就是与组件化冲突的，它仍然可以通过directive等相关机制，实现自己特色的组件化方案。
Directive可以实现自定义标签和自定义属性，这两者可以理所当然地归类到组件中，但是，在Angular中，模板本身也可以视为一种组件，一种轻量级的组件，它不一定就是静态的，仍然可以有一些简单的操作和行为。
Directive和模板相当于MVVM中的View层，它们的运行，一般是离不开ViewModel的支撑的，在Angular中，这就是controller。所以，如果以Angular框架来说，directive和模板、controller，共同形成了视图层组件体系。推广到其他MVVM框架来说，也就是View和ViewModel，而React整体就处于视图层，所以这两者算是一个对等关系。
这些流派有共同的未来吗，会是什么？
无论是哪种框架，在开发Web应用的时候都要面临一个问题：业务数据层如何设计？
这一层东西，其实目前各路框架都未提出有力的解决方案，大家的重点都还是在做上层UI。
但是从长远来看，业务数据层会是一个基本没有框架差异的东西，同一个方案，大家都可以用，比如说之前有人把flux之类的东西放到React之外的框架用，也一样可以。
而上层UI，其实现过程现在也很明确地是要往Web Components靠拢，实现逻辑都是使用ES新标准，数据绑定机制都是getter setter或者observe，加载方式都在考虑HTTP2之类，一旦某个领域出现了理念突破，很快就会被其他框架吸收融合。
所以总的来说，各框架是趋同的。
上完马原课，又是好晚了，就简单更新一点吧
我们会从一个简单的点赞功能讲起。 假设现在我们需要实现一个点赞、取消点赞的功能。
如果你对前端稍微有一点了解，你就顺手拈来：
HTML:
<body>
<div class='wrapper'>
<button class='like-btn'>
<span class='like-text'>点赞</span>
<span>为了模拟现实当中的实际情况，所以这里特意把这个 button 里面的 HTML 结构搞得稍微复杂一些。有了这个 HTML 结构，现在就给它加入一些 JavaScript 的行为：
JavaScript：
const button = document.querySelector('.like-btn')
const buttonText = button.querySelector('.like-text')
let isLiked = false
button.addEventListener('click', () => {
isLiked = !isLiked
if (isLiked) {
buttonText.innerHTML = '取消'
} else {
buttonText.innerHTML = '点赞'
}
}, false)
功能和实现都很简单，按钮已经可以提供点赞和取消点赞的功能。这时候你的同事跑过来了，说他很喜欢你的按钮，他也想用你写的这个点赞功能。这时候问题就来了，你就会发现这种实现方式很致命：你的同事要把整个 button 和里面的结构复制过去，还有整段 JavaScript 代码也要复制过去。这样的实现方式没有任何可复用性。
扫一扫
883
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
