Node.js前后端框架总结

React

1. JSX为react元素，使用{}嵌入js表达式（需要babel转码），使用双引号表示字符串字面量

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;
const element1 = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

等价于

const element1 = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);
// 创建对象
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

当React元素为自定义组件时，JSX的属性和子组件children转换为如上props传递给组件。小写字母开头的组件视为原生 DOM 标签，大写字母开头为自定义组件

2. 将元素渲染为DOM
   html文件存在<div id="root"></div>
   将一个 React 元素渲染到根 DOM 节点中，只需把它们一起传入 ReactDOM.render(虚拟DOM, 真实DOM)：

ReactDOM.render(element, document.getElementById('root'));

3. 组件
   函数组件和class组件本质上都是接收props返回react元素

function Hello(props) {
  const element = <h1>Hello, {props.name}</h1>;
  return element;
}

class Hello extends React. Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

所有 React 组件都必须像纯函数一样保护它们的 props 不被更改，props是公有的用于组件间交互，class 组件应该始终使用 props 参数来调用父类的构造函数。 state 是私有的，state更新用于重新渲染组件状态，但直接修改state不会重新渲染：
this.state.comment = 'Hello';,构造函数是唯一可以这样赋值使用的地方，其余应：this.setState({comment: 'Hello'});

注意 this.props 和 this.state 可能会异步更新，所以你不要依赖他们的值来更新下一个状态，此时应该使用setState接收一个函数

this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

组件的生命周期：
mount：组件第一次被渲染到 DOM
componentWillMount()
componentDidMount()
componentDidUpdate()

unmount：卸载
componentWillUnmount()

父组件向子组件传参数使用props
子组件向父组件传参数需要父组件调用子组件时传入props parent: this，然后在子组件中通过this.props.parent.getChildMsg(this, msg)调用父组件的回调实现参数传递。

Vue

双向数据绑定，Vue组件中的data可以绑定至DOM内容、vue的v-attribute和结构中。
v-bind 简写为:
v-on 简写为@
this.$ref 声明引用名称
this.$emit 调回调

Express

require加载node模块
var express = require('express')
var app = express()
app.listen(port)

var router = express.Router()
app.use('/url', router)
在路由匹配前可使用多级中间件进行处理
router.use(function(req, res, next) { ...; next(); });
路由匹配
router.get('/url', function(req, res) {res.send(...);});
router.post('/url', function(req, res){res.json(.. : ..);});
req.params.fieldname 可获取参数中字段
var bodyParser = require('body-parser')
app.use(bodyParser, urlencoded())
使用body-parser模块req.body.fieldname可获得请求字段

其他

• this可表示全局、函数调用对象、构造函数本身对象等，使用apply()可以改变函数调用对象
• 闭包是方便在外部读取函数内部变量(函数体内var声明，不用var为全局变量)的函数
• 异步的多种实现方式
  回调
  Promise链式调用