待整理

npm i babel-core babel-preset-es2015 babel-preset-react --save-dev
webpack.config.js
.babelrc
    - {}

脚手架

npm i  -g create-react-app脚手架
打包演示
    - npm i -g serve
    - serve -s build
脚手架生成的项目中npm run eject可以向外暴露react-scripts封装好的配置文件
[].unshift() //数组添加一个或多个,返回长度

axios和fetch

npm i axios -D
解决跨域
    - jsonp(json padding)
        - 只能发送get
    - cors跨域
状态码
    - 200成功
    - 304重定向到缓存(之前访问过的) 30123重定向到服务器
    - 404
    - 500服务器错了
axios.get(url).then(res => {  //then第二个参数用catch
    console.log(res.data)       // 获取的数据被封装过了,应该是res.data
}).catch(error=>{})

fetch(url).then(r=>r.json()).then(data=>{}).catch(err=>{})

SSR(server side render)

优点
    - 服务器端和浏览器端共享某些代码
    - 加载页面速度加快(在服务器有缓存了,除了第一个人)
    - 便于seo优化
缺点
    - 服务器压力大
    - 服务器要基于node搭建

//node index.js

index.js页面
require('babel-register'); //自动解析下面的require
require('./src/server.js');

server.js页面
import React from 'react';
import { renderToString } from 'react-dom/server';
var http = require('http');
import App from './App';

//创建服务器对象, 并启动监听
http.createServer(function (request, response) {
  //向浏览器端写头信息
  response.writeHead(200, {'Content-Type': 'text/html;charset=utf-8'});
  //渲染组件成标签结构字符串
  const appHTML = renderToString(<App />);
  //向浏览器返回结果
  response.end(appHTML);
}).listen(8888);
// 终端打印提示信息
console.log('Server running at http://127.0.0.1:8888/');

key的特殊性

react中用key标识唯一的组件
state更改后按照key对比前后
用数组索引做key时,注意改变数组可能会改变key
    - input框中的值会背记录

 

转载于:https://www.cnblogs.com/liqunblog/p/9628242.html