React 基础学习总结

2019-06-11  本文已影响0人  豆腐先生就是我

React 基础学习总结

1、创建虚拟DOM对象的两种方式

2、React 的 jsx 语法

3、定义组件两种方式

4、React 组件的实例对象上 三大属性(what why how)

5、组件化编码流程和套路

  1. 拆分组件: 根据页面功能进行拆分
    App
    AddTodo
    TodoList
  2. 实现静态组件
    先实现大的组件(最外层组件),再实现里面的组件。
    有一个基本的显示效果
  3. 实现动态组件
  1. 组件特别注意事项:
      1. 组件内置的方法中的this为组件对象
      1. 在组件类中自定义的方法中this为null
        a. 强制绑定this: 通过函数对象的bind()
        b. 箭头函数(ES6模块化编码时才能使用)

6、 收集表单数据(受控组件与非受控组件)

7、 组件的生命周期(Component-lifecycle)

Diff算法------->

  1. 总结:
    • React 通过制定大胆的 diff 策略,将 O(n3) 复杂度的问题转换成 O(n) 复杂度的问题;

    • React 通过分层求异的策略,对 tree diff 进行算法优化;

  1. 作用:
    • 最小化页面重绘、减少重排重绘的次数

key 与 index 对比

  1. 为什么列表的key尽量不要用index
  1. 结论:

react-scaff 脚手架

1.简述:
* 1) xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目
* a. 包含了所有需要的配置
* b. 指定好了所有的依赖
* c. 可以直接安装/编译/运行一个简单效果
* 2) react提供了一个用于创建react项目的脚手架库: create-react-app
* 3) 项目的整体技术架构为: react + webpack + es6 + eslint + babel
* 4) 使用脚手架开发的项目的特点: 模块化, 组件化, 工程化

  1. 安装启动:
npm install -g create-react-app
create-react-app hello-react
cd hello-react
npm start

  1. json配置含义:
"scripts": {
    "start": "react-scripts start",  //启动服务器端口监听
    "build": "react-scripts build", //生产环境指令
    "test": "react-scripts test",   // 测试文件是否有问题
    "eject": "react-scripts eject"  //会webpack配置打包,在要大量修改时使用(一般不用)
  },

PubSubJS 利用第三方库组件进行交互

antD-UI构建库项目

  1. 创建项目,引入adtd

    • create-react-app react-admin
      • npm i antd
  2. 在根目录配置按需打包文件 config-overrides.js

    • 安装: yarn add react-app-rewired customize-cra babel-plugin-import -D
      • 配置: config-overrides.js
      const { override, fixBabelImports} = require('customize-cra');
      
         module.exports = override(
             fixBabelImports('import', {
                 libraryName: 'antd',
                 libraryDirectory: 'es',
                 style: true,
             }),
         );
      
      
  3. 在应用中使用antd组件

  4. 自定义antd主题

    • 安装: yarn add less less-loader -D
    • 功能: 编译less,和主题颜色配置
  5. 引入路由

    • 安装: yarn add react-router-dom
      • 配置路由: 项目应该首先设置路由
  6. 静态组件引入

    • 按需引入
    import {Form, Icon, Input, Button} from 'antd'    //按需引入
    const Item = Form.Item;   //替换成Item
    
    
  7. 表单验证

    • 利用高阶函数 给Form创建form属性
    @Form.create()
    class Login extends Component {...}
    export default Login     
    
    • 引入验证函数
            // 引入  
            render() {
       const { getFieldDecorator } = this.props.form;
               ...
            // 验证语法
            
               
    

antd-UI项目包管理

  1. antd-UI下载
    yarn add antd
  2. 路由管理
    react-router-dom
  3. 组件按需打包
    react-app-rewired -D
    customize-cra -D
    babel-plugin-import -D
  4. 修改主题颜色,编译文件
    less less-loader -D
  5. mongodb数据库
  6. postman接口测试
  7. ajax请求
    axios
  8. 本地存储
    store
  9. 文件路径配置
    node原生模块 path
  10. 轻量的处理时间和日期库
    apm i dayjs --save
  11. 跨域处理...
    npm i jsonp

redux状态管理

  1. React Component 组件
  1. actions creator 事件行为定义,创造新的store行为
  2. reducers 新状态生成,并不更新
  1. store 存储比较新旧状态

context

高阶组件

* 是一个函数,接收一个组件,返回一个组件
* 新组件

扩展:

Virtual-DOM(虚拟DOM) 和 真实DOM 的比较:

上一篇下一篇

猜你喜欢

热点阅读