React芝麻

最新推荐文章于 2024-09-14 07:49:48 发布

天落枫

最新推荐文章于 2024-09-14 07:49:48 发布

阅读量238

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/xiapi3/article/details/106364037

前端专栏收录该内容

8 篇文章

订阅专栏

React芝麻

react样式

react的样式可以写在行内，也可以写在同名文件中

写在行内时：inline block样式：<div style={{ display:'inline-Block' }} >
一般而言行内样式的值为字符串且遵循驼峰命名

写在同名文件中：此时和普通css文件类似就行

注意：对于react+antd的样式来说，如果需要改变样式，则可以在调试器中先找到需要修改的那个样式类名，然后使用后代选择器进行样式覆盖，一定要重新起个名字，否则会改变全局样式！

react启动端口修改

当使用create-react-app创建react工程时，默认启动端口是3000
原因：
react项目使用npm start后，相当于去node_modules里的react-scripts包中执行start.js
查看start.js，存在这么一句：
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;

此处相当于从进程所属环境中拿PORT变量，然后通过parseInt转换成10进制的结果与3000进行与操作，即如果环境中无PORT变量，前面的操作为false，直接返回3000

如果需要改变该端口，方法：
方法一：直接改变3000为其他端口
方法二：修改package.json：

  "scripts": {
    "start": "set PORT=3001 && react-scripts start",
  },

react http通信

与后端通信推荐使用Axios作为http请求方案

create-react-app关闭eslint

分两步：

运行npm run eject
进入config中的jest，打开webpackage.config.js文件

react CSS模块化

需要在webpack中启用模块化功能
可以通过import XX from XXX来导入一个样式表对象，然后通过样式表对象来访问属性

react构造函数中访问props

在class组件中，构造函数里不能通过this访问props，但可以通过constructor的形参来访问
同时应该将props参数传递给super方法！

react懒加载

懒加载：即在页面中需要用到的时候再进行加载导入，同动态加载

动态加载：import("./math").then(math => { console.log(math.add(16, 26)); });
示例代码：

class App extends Component {
  clickHandle = e => {
    Promise.all([
      import('./modueA')
    ]).then(([e]) => {
      console.log(e)
        e.add(1,2)
    });
  }
  render() {
    return (
      <div>
          <button onClick={this.clickHandle}>click</button>
      </div>
    );
  }
}

注意：动态加载不太适用于组件加载，适用于加载方法或对象，而 React.lazy() 适用于组件加载。

懒加载：const OtherComponent = React.lazy(() => import('./OtherComponent'));
示例代码：

import React,{Component,Suspense} from 'react'
const Header=React.lazy(()=>import('./Header'))
 
render() {
  return (
    <div>
      <Suspense fallback={<div>正在加载...</div>}>
          <Header />
      </Suspense>
    </div>
  )
}

注意：Suspense 的 fallback 表示自定义加载的 UI，可以为 null，但不能不存在。在待加载组件还没加载完成时，显示fallback里的ui，直到加载完成。懒加载组件必须同时使用suspense！

一般用Spinner来占位

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    // Displays <Spinner> until OtherComponent loads
    <React.Suspense fallback={<Spinner />}>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense>
  );
}