• react and reduct 学习手记1


    chap1

    1.react 声明式,组件方法改变界面,diff局部刷新无绑定,可作为V层与其他技术栈搭配

    2.redux js容器 状态管理 单一数据源state被存在对象树中,state只能通过setstate方法改变,纯函数更新state

    3.前后端采用统一的Universal渲染,加载速度快,利于seo

    4.babel js编译工具es6->es5

    5.webpack 前端资源打包和模块管理

    chap2

    run in node

    1.编写组件

    组件只有一个render函数时可以直接写为无状态函数

    import  React from 'react';

    export default class App extends React.Component{

    render(){

    </h1>hello</h1>

    }

    }

    改写为

    import React from 'react';

    export default function App(){

    return <h1>hello</h1>

    }

    这里export dfeault 是方便其他模块导入import App from './App';否则要写为import {App} from './App';

    2.nodejs中使用renderToString方法渲染组件成字符串

    server.js中

    import {renderToString} from 'react-dom/server';

    import App from './App';

    const HTML = renderToString(<App />);

    console.log(HTML);

    3.运行 使用 es2015和JSX时,需要使用babel进行编译

    测试环境中使用babel的内建工具require hook来运行babel,原理是在require上放个hook,每次调用require时就会先进行编译和运行,因为性能原因,只会在测试环境中进行

    how to use require hook

    3.1 npm install babel-register --save-dev   //这里可以在packages.json中查看对应安装步骤

    3.2 入口文件顶部使用 require('babel-register');

    3.3 安装es2015 react :   npm install --save-dev babel-preset-es2015 babel-preset-react

    3.4 添加.bashrc 激活es2015和react的预设  {"preset":['es2015','react']}

    3.5 npm start 运行

    注意:

    1.安装 node npm @latest

      sudo npm config set registry https://registry.npm.taobao.org

      sudo npm config list

      sudo npm install n -g

      sudo n install npm@latest -g

      2.安装

      npm install --save-dev react 

      npm install --save-dev react-dom

  • 相关阅读:
    014Linux几种虚拟网络比较
    013Docker几种存储驱动比较(转发)
    005文件系统压测工具iozone
    016SNAT和DNAT区别
    012docker四种网络模式区别
    001CPU个数/物理核数/逻辑核数/vCPU数之间的区别
    009Ubuntu关闭掉终端或jet公司烦人的bell音
    Java 微信小程序imgSecCheck接口示例-校验一张图片是否含有违法违规内容
    提升NginxTLS/SSL HTTPS 性能的7条优化建议
    MySQL复合索引探究
  • 原文地址:https://www.cnblogs.com/billhsu2009/p/10077121.html
Copyright © 2020-2023  润新知