• 从create-react-app 项目搭建开始


    1、全局安装(4.0.1)

    npm i -g create-react-app
    查看版本号:create-react-app -V

    2、创建新项目

    create-react-app my-app

    项目结构:

    my-app
    ├── README.md
    ├── node_modules
    ├── package.json
    ├── .gitignore
    ├── yarn.lock
    ├── public
    │   ├── favicon.ico
    │   ├── index.html
    │   └── logo192.png
    │   └── logo512.png
    │   └── manifest.json
    │   └── robots.txt
    └── src
        ├── App.css
        ├── App.js
        ├── App.test.js
        ├── index.css
        ├── index.js
        ├── logo.svg
        └── reportWebVitals.js
        └── setupTests.js
    

    3、运行项目

    自动打开 http://localhost:3000/

    npm start 或者 yarn start

    4、安装依赖

    1、React Router安装:

    • react-router-dom ( 应用于浏览器端的路由库 )
    • react-router-native ( 应用于native端的路由 )

    npm install --save react-router-dom
    npm install --save react-router-native

    react-router-dom基本使用>>>

    2、redux react-redux安装:
    记录一下版本号:redux: v4.0.5 ------- react-redux: v7.2.2

    npm install redux -S
    npm install react-redux -S

    react-redux 的基本使用>>>

    5、vscode相关插件

    • ES7 React/Redux/GraphQL/React-Native snippets
      用于快速生成模板(部分常用快捷键)

    rcc 快速创建一个组件(使用extends方式)
    rconst 快速创建一个 constuctor
    rcredux 快速创建一个 redux格式的类模板
    clg 是 console.log()的快捷键

    6、组件生命周期 1.7版本

    componentWillReceiveProps ------------子组件props变化就会调用(已废弃)

    • 创建到完成阶段
      constructor -------------------------------------------------------实例化对象
      componentWillMount ------------------------------------------------即将进入DOM(已废弃)
      getDerivedStateFromProps(props,state){ return state }-------------即将进入Dom
      render ------------------------------------------------------------组件渲染
      componentDidmount--------------------------------------------------已经进入DOM,渲染完成

    • 组件更新阶段
      shouldcomponentUpdate ---------------------------------------------判断是否需要重新渲染组件
      render ------------------------------------------------------------组件渲染
      componentWillUpdate------------------------------------------------组件即将重新渲染(已废弃)
      getSnapshotBeforeUpdate(newProps, newState){ return newState } ----组件更新前
      componentDidUpdate ------------------------------------------------组件重新渲染完成

    • 组件销毁
      componentWillUnmount-----------------------------------------------删除组件

  • 相关阅读:
    Mvc 简单分页代码
    算法
    atx
    Java8函数式编程(A)
    axios
    props
    vue 的keep alive使用注意项
    android帮助
    testng监听器方法执行顺序
    常用正则表达式
  • 原文地址:https://www.cnblogs.com/sgs123/p/14031009.html
Copyright © 2020-2023  润新知