MVC和react

MVC

1.MVC是一种使用MVC（Model View Controller 模型-视图-控制器）设计创建Web应用程序的模式.

(1)Model（模型）表示应用程序核心（比如数据库记录列表）.

(2)View(视图)显示数据（数据库记录）.

(3)Controller（控制器）处理输入（写入数据库记录）.

2.MVC模式同时提供了对HTML、CSS和JavaScript的完全控制.

(1)Model（模式）是应用程序中用于处理应用程序数据逻辑的部分，通常模型对象负责在数据库中存取数据.

(2)View（视图）是应用程序中出处理数据显示的部分，通常视图是依据模型数据创建的.

(3)Controller（控制器）是应用程序中处理用户交互的部分，通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据.

react介绍

1.介绍

(1)react是一个用于创建可复用、可聚合的web组件库.

(2)react提供的只是mvc里面的c部门，不是全部的mvc框架.

2.特点

(1)组件化：不是一大堆html代码模板.

(2)js逻辑与html标签紧密连接.

(3)单向数据传输.

(4)虚拟的DOM结构.

3.优点

(1)组件更加清晰直观.

(2)组件关系更加清晰.

(3)结果可以预测.

4.react重要文件内容及作用

重点的三个库：

(1)react.js是React的核心库.

(2)react-dom.js是提供与DOM相关的功能.

(3)Browser.js的作用是将JSX语法转化为JavaScript语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成

jsx语法

1.jsx是一个看起来很像XML的JavaScript语法扩展，React可以用来做简单的JSX句法转换.

2.为什么要使用JSX？

(1)你不需要为了React使用JSX,可以直接使用纯粹的JS，但我们更建议使用JSX，因为它能定义简洁且我们熟知的包含属性的树状结构语句.

(2)对于非专职开发者(比如设计师)同样比较熟悉.

(3)XML有固定的标签开启和闭合，这能让复杂的树更易于阅读，由于方法调用和对象字面量的形式.

(4)它没有修改JavaScript语义.

3.JSX的语法，它允许HTML与JavaScript的混写.

4.jsx遇到HTML标签（以 < 开头）,就用HTML规则解析，遇到代码块(以 { 开头)，就用JavaScript规则解析.

5.ReactDOM.render():是React的最基本方法，用于将模板转为HTML语言，并插入指定的DOM节点.

6.JavaScript表达式的使用：

(1)可以在JSX 中使用JavaScript表达式，表达式写在花括号 { } 中.

ReactDOM.render(
    <div><h1>{1+1}</h1></div>
    document.getElementById('example'));

(2)在JSX中不能使用if else 语句，但可以使用conditional（三元运算）表达式来替代:

ReactDOM.render(
    <div><h1>{i==1?'True':'False'}</h1></div>
    document.getElementById('example'));

(3)样式的使用：React推荐使用内联样式，我们可以使用camelCase语法来设置内联样式React会在指定元素数字后自动添加px.

(4)注释的使用：注释需要写在花括号内.

(5)数组的使用：JSX允许在模板中插入数组，数组会自动展开所有成员.

7.HTML标签和React组件的渲染

(1)React可以渲染HTML标签(strings)或React组件(classes).

(2)要渲染HTML标签，只需要在JSX里使用小写字母的标签名.

(3)要渲染React组件，只需创建一个大写字母开头的本地变量.

由于JSX就是JavaScript，一些标识符像class和for不建议作为XML属性名，作为替代。Reacr DOM 使用className和htmlFor来做对应的属性.

组件的介绍

1.组件即是函数

(1)对于一个独立组件而言，你可以把它看成是一个JavaScript函数.

(2)对于函数而言，当你通过传递参数调用函数时，函数会返回给你一个值，相比之下，对于React组件而言，道理是相似的，你传递属性给组件，而组件则会返回一个被渲染好的DOM.

组件的创建：

1.React推出后，出于对不同的原因先后出现三种定义react组件的方式.

(1)函数式定义的无状态组件.

(2)es5原生方式React.createClass定义的组件.

(3)es6形式的extends React.Component定义的组件.

2.无状态函数式组件

1.创建无状态函数式组件形式是从React 0.14版本开始出现的，它是为了创建纯展示组件，这种组件只负责跟据传入的props来展示，不涉及到要state状态的操作，具体的无状态函数式组件，其官方指出：

在大部分React代码中，大多数组件被写成无状态的组件，通过简单组合可以构建成其他的组件等；这种通过多个简单然后合并成一个大应用的设计模式被提倡。

React：

1.React.Component有三种手动绑定方法：可以在构造函数中完成绑定，也可以在调用时使用method.bind(this)来完成绑定，还可以使用arrowfunction来绑定。拿上例中的handleClick函数来说，其绑定可以有：

constructor(props) { super(props) };

this.handleClick = this.handleClick.bind(this);//构造函数中绑定

<div onClick={ this.handleClick.bind(this) } > </div>  //使用bind来绑定

<div onClick={ () = > this.handleClick() } > </div> //使用arrow function来绑定

对象继承：

1.bind( )方法的主要作用就是将函数绑定至某个对象，bind( )方法会创建一个函数，函数体内this对象的值会被绑定到传入bind( ) 函数的值. 

Function.prototype.bind(thisArg[, arg1[arg2[, ...]]])
eg:
Function.prototype.bind = function (context) {
     var self = this;//保存原函数
     return function () { //返回一个新函数
          return self.apply(context, arguments);//执行新函数时，将传入的上下文context作为新函数的this
     }
}

state状态

1.介绍：组件在运行时需要修改的数据就是状态.

(1)组件免不了要与用户互动，React的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染UI.

(2)this.state是会随着用户互动而产生变化的特性.

(3)React里，只需要更新组件的state，然后根据新的state重新渲染用户界面(不要操作DOM).

(4)我们通过this.state设置state的值.

(5)通过this.setState（）设置state的值.

(6)state的作用域值作用在当前类，不污染顶级变量.

2.state的工作原理

(1)常用的通知React数据变化的方法是调用setState(data,callback).这个方法会合并(merge) data 到this.state,并重新渲染组件。渲染完成后，调用可选的callback回调。大部分情况下不需要提供callback,因为React会负责把界面更新到最新状态.

(2)state:

1)state是React中组件的一个对象，React把用户界面当作是状态机，想象它有不同的状态，然后渲染这些状态，可以轻松让用户界面与数据保持一致.

2)React中，更新组件的state,会导致重新渲染用户界面(不要操作DOM)，简单来说，就是用户界面会随着state变化而变化.

3.setState用法：

(1)void setState(function|object nextState,[ function callback ])

1)setState方法通过一个队列机制实现state更新，当执行setState的时候，会将需要更新的state合并之后放入状态队列，而不会立即更新this.state(可以和浏览器的事件队列类比)。如果我们不使用setState而是使用this.state.key来修改，将不会触发组件的render。如果将this.state赋值给一个新的对象引用，那么其他不在对象上的state将不会被放入状态队列中，当下次调用setState并对状态队列进行合并时，直接造成了state丢失.

2)第二个参数是一个回调函数，在setState的异步操作结束并且组件已经重新渲染的时候执行，也就是说，我们可以通过这个回调来拿到更新的state的值.

4.props属性

(1)props相对于模块来说是外来属性，它经常用于模块之间的传值.

(2)state与props区别：

1)组件本质上是状态机，输入确定，输出一定确定。组件把状态与结果一一对应起来，组件中有state与props(状态与属性).

2)属性(props)是由父组件传递给子组件的；状态(state)是子组件内部维护的数据，当状态发生变化的同时，组件也会进行更新，当状态发生转换时会触发不同的钩子函数，从而让开发者有机会做出响应.

 React Refs

1.React支持一种非常特殊的属性Ref,你可以用来绑定到render( )输出的任何组件上.

2.是个特殊的属性，允许你引用render( )返回的相应的支撑实例( backing instance ).这样就可以确保在任何时间总是拿到正确的实例.

3.获取组件属性，或者设置组件属性可以使用原生js方法，也可以使用refs.

1）原生属性：例如单机按钮时让按钮背景颜色变化，给按钮添加个id，在handleClick里获得内容并且改变颜色.

2）ref:给按钮添加一个red属性，在对应的方法里用refs获得.

3）注：从react14版本以上，推荐使用ref回调函数方式.