React, 初见
React
[嵌牛导读]
作为前端爱好者，对于“前端”
又爱又恨， 无可奈何， 欲罢不能
作为React“初学者”，我不得不承认
React, This is really cool !
本文将从一个初学者的角度来探索，观察React，希望能够尝试用自己的角度去解读React.
[嵌牛鼻子]
React， 组件化（Component）， 状态（state）， 数据绑定，状态管理， VirtualDOM
[嵌牛提问]
- 当你觉得你的代码组织简直不能直视， 当你觉得你的代码构思时逻辑清晰，可真正写出来一团糟，这个时候你得停下来，尝试着去解决为什么自己在用代码表达逻辑时是混乱的？
- React如何能够获得如此青睐，为何具有如此魅力以至于不管项目大小都会去采用React？
- 当把React的思想运用在自己的项目中，会产生什么样的变化，是否会产生正向变化？
[嵌牛正文]
React官方图标
1. MVC
MVC（Model, View, Controller）,模型-视图-控制器.
对于MVC，存在两种观点：
- MVC看作是一种设计模式
- MVC是一种架构方式
我更倾向于后者。
MVC-图片来自网络
-
Model - 模型
通常用于保存用户数据模型，或者数据库数据模型，负责处理或是管理数据逻辑 -
View - 视图
通常用于构建视图来展示数据，负责显示来自Model建立的数据 -
Controller - 控制器
通常被认为是Model 和 View 中间的传话者，接受来自View层的数据，传递给Model层更新数据，或是接受来自Model完成的数据 ，交付给View层来展示
之所以提到MVC，是因为React正是担任View层这一重要角色，用于构建页面动态UI。在接收到Controller传递的Model数据，通过动态建立组件（Component）组织，嵌套，生成页面。
2. React核心思想-组件化
组件，Component，是React中非常重要的概念,因为最终生成的向用户展示的页面正是由许多个不同的组件，相互组合，嵌套，拼接而成。
示例 - Src
如上图示例所示，页面组件化
整个页面 <Index />组件
顶部导航栏 <Nav />组件
中间搜索框 <Search />组件
最终页面构成(仅作示例说明)
<Index>
<Nav />
<Search />
<Index />
当我们在设计View层时，只需要构建这３个组件，进行组合即可。整个页面结构非常清晰明确，代码简洁便于维护阅读。
这其实就是React带来的好处，它以一种高效的，易于理解的方式来构建页面，整个页面被分成各个不同的小块，每个小块就是一个组件（<Index /> | <Nav /> | <Search />），只需要将这些组件进行组合就可以高效的完成整个视图层的开发。
3. 状态（state）
class Clock extends React.Component {
constructor() {
super()
this.state = {date: new Date()}; // state 与页面<h2>内容绑定
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
)
}
}
React中页面有许多个组件构成，每一个组件有自己独立的数据（Model）需要展示，为了能够将数据变化能够及时的反应在视图层（View），React采用state 将数据绑定在页面，通过这种双向数据绑定可以完美解决数据和组件之间的完美同步
Model 变化 －〉 View变化
View变化 －〉 Ｍodel变化
END
