• 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

  • 相关阅读:
    FFT最新卡常研究
    NOI2019赛前两周被吊打记录
    【NOI2019模拟2019.7.1】为了部落 (生成森林计数,动态规划)
    【NOI2019模拟2019.7.1】三格骨牌(轮廓线dp转杨图上钩子定理)
    Pytorch学习之源码理解:pytorch/examples/mnists
    [转载] ReLU和BN层简析
    Python的argparse模块的使用
    [转载]Pytorch中nn.Linear module的理解
    Pytorch中nn.Dropout2d的作用
    Pytorch中randn和rand函数的用法
  • 原文地址:https://www.cnblogs.com/billhsu2009/p/10077121.html
Copyright © 2020-2023  润新知