Raccon_的博客

React 用于构建用户界面的 JavaScript 库 通过使用jsx创建虚拟DOM映射真实DOM来减少页面的重绘重排

React组件 函数式组件 通过定义function来创建函数式组件 function MyComponet() { console.log(this); // 此处的this是undefined babel翻译后开启了严格模式 return <h2>函数式组件</h2> } // 渲染组件到页面 ReactDOM.render(<MyComponet/>,document.querySelector('.main-container')

事件 采用on+事件名的方式来绑定一个事件 React的事件并不是原生事件，而是合成事件 事件的绑定

表单 在 React 里，HTML 表单元素的工作方式和其他的 DOM 元素有些不同，这是因为表单元素通常会保持一些内部的 state。例如这个纯 HTML 表单只接受一个名称： <form> <label> 名字: <input type="text" name="name" /> </label> <input type="submit" value="提交" /> </form> 此表单具有默认的

生命周期函数 React中组件也有生命周期，也就是说也有很多钩子函数供我们使用, 组件的生命周期会分为四个阶段，初始化、运行中、销毁、错误处理(16.3之后) 1、初始化 在组件初始化阶段会执行 constructor static getDerivedStateFromProps() componentWillMount() / UNSAFE_componentWillMount() render() componentDidMount() 2、更新阶段 props或stat

组件通信 父组件与子组件通信 父组件将自己的状态传递给子组件，子组件当做属性来接收，当父组件更改自己状态的时候，子组件接收到的属性就会发生改变 父组件利用ref对子组件做标记，通过调用子组件的方法以更改子组件的状态,也可以调用子组件的方法… 子组件与父组件通信 父组件将自己的某个方法传递给子组件，在方法里可以做任意操作，比如可以更改状态，子组件通过this.props接收到父组件的方法后调用。 跨组件通信 在react没有类似vue中的事件总线来解决这个问题，我们只能借助它们共同的父级

Portal Portals 提供了一个最好的在父组件包含的DOM结构层级外的DOM节点渲染组件的方法。 ReactDOM.createPortal(child,container); 第一个参数child是可渲染的react子项，比如元素，字符串或者片段等。第二个参数container是一个DOM元素。 1、用法 普通的组件，子组件的元素将挂载到父组件的DOM节点中。 render() { // React 挂载一个div节点，并将子元素渲染在节点中 return ( <div

React Hooks 在 React 的世界中，有容器组件和 UI 组件之分，在 React Hooks 出现之前，UI 组件我们可以使用函数，无状态组件来展示 UI，而对于容器组件，函数组件就显得无能为力，我们依赖于类组件来获取数据，处理数据，并向下传递参数给 UI 组件进行渲染。在我看来，使用 React Hooks 相比于从前的类组件有以下几点好处： 代码可读性更强，原本同一块功能的代码逻辑被拆分在了不同的生命周期函数中，容易使开发者不利于维护和迭代，通过 React Hooks 可以将功能代码

React-router React Router现在的版本是6，使用方式相对于之前版本的思想有所不同。之前版本的思想是传统的思想：路由应该统一在一处渲染， Router 4之后是这样的思想：一切皆组件 React Router包含了四个包: 包名 Description react-router React Router核心api react-router-dom React Router的DOM绑定，在浏览器中运行不需要额外安装react-router react-router

Context 除了Redux第三方全局状态管理外 React本身也有Context上下文用于跨组件传递数据 当组件嵌套层级过多时 eg:app>test>test2 新建myCtx.js用于创建上下文对象 // myCtx.js import React from 'react' const ctx = React.createContext({ a: 1, b: 2 }) // 此处填入的为默认数据 export default ctx // app.js impor

全局状态管理 Redux Redux的设计思想： Web 应用是一个状态机，视图与状态是一一对应的。 所有的状态，保存在一个对象里面（唯一数据源）。 Redux的使用的三大原则： Single Source of Truth(唯一的数据源) State is read-only(状态是只读的) Changes are made with pure function(数据的改变必须通过纯函数完成) Context 除了Redux第三方全局状态管理外 React本身也有Context上下文用于跨组件传递

错误边界（Error Boundaries） 部分 UI 的 JavaScript 错误不应该导致整个应用崩溃 如：jsx的html结构中显示对象 为了解决这个问题，React 16 引入了一个新的概念 —— 错误边界 错误边界是一种 React 组件，这种组件可以捕获发生在其子组件树任何位置的 JavaScript 错误 并打印这些错误，同时展示降级 UI，而并不会渲染那些发生崩溃的子组件树 错误边界可以捕获发生在整个子组件树的渲染期间、生命周期方法以及构造函数中的错误 import React, {

Css Modules css modules 通过对css类名的重命名，保证每一个类名的唯一性，从而避免样式冲突问题 实现方式：webpack的css-loader插件 在react脚手架中演化成：文件名，类名，hash（随机）三部分，只需要指定类名即可。 1.在index.module,css中我们写一个类名 .red{ } 2.通过css modules就会给我们转化成类名 .Button_error_axy4s Css Modules 在项目中的使用 1.首先创建一个名为index.m

Redux-Toolkit 一个官方提供用于Redux高效开发的、有想法的、功能齐全的工具包 #安装 npm i @reduxjs/toolkit #or yarn add @reduxjs/toolkit yarn add react-redux # 安装插件 yarn add redux-devtools -D # 安装调试工具，-D安装开发依赖 Redux-Toolkit 的使用 // store.js import { configureStore } from '@reduxjs/too

axios 跨域 在src目录下新建setupProxy.js文件 const { createProxyMiddleware } = require('http-proxy-middleware') module.exports = function(app){ app.use( '/sugrec', createProxyMiddleware({ target:'https://www.baidu.com', changeOrigin:true, }

Immutable 每次修改Immutable对象都会创建一个新的不可变对象，在新对象上操作都不会影响到原对象的数据 深拷贝与浅拷贝 浅拷贝 只复制引用，不复制一个新的对象 arr = { }; arr2 = arr Object.assign() 只是一级属性复制，只比浅拷贝多了一层 深拷贝 复制一个新的对象 const obj1 = JSON.parse(JSON.stringify(obj)) 数组、对象都好用 （缺点:不能有undefined） Immutable优化性能 Immutabl

Mobx Mobx是一个功能强大，上手非常容易的状态管理工具。 redux的作者也曾经向大家推荐过它，在不少情况下可以使用Mobx来替代掉redux。 官网有明确的核心概念使用方法，并配有egghead的视频教程。这里就不一一赘述了。 要特别注意当使用 mobx-react 时可以定义一个新的生命周期钩子函数 componentWillReact。当组件因为它观察的数据发生了改变，它会安排重新渲染，这个时候 componentWillReact 会被触发。这使得它很容易追溯渲染并找到导致渲染的操作(ac

Lazy 和 Suspense 1、React.lazy 定义 React.lazy 函数能让你像渲染常规组件一样处理动态引入（的组件）。 什么意思呢？其实就是懒加载。其原理就是利用es6 import()函数。这个import不是import命令。 同样是引入模块，import命令是同步引入模块，而import()函数动态引入。 当 Webpack 解析到该语法时，它会自动地开始进行代码分割(Code Splitting)，分割成一个文件，当使用到这个文件的时候会这段代码才会被异步加载。 (1) 为什

测试 当代码每次进行修改时都需要重新测试 通过编写测试用例可以减少代码测试的成本 React测试 官方测试 测试依赖下载 npm i react-test-renderer 测试代码 import React,{ Component } from 'react' export default class Test extends Component { iptRef = React.createRef() render() { return ( <div&gt

React集成 构建React-TS项目 create-react-app demo --template typescript 声明文档 当在ts项目中使用依赖包时需要声明文档 部分依赖包的声明文档在依赖包的根目录下 因此不需要额外下载 当需要声明文档时需要另外安装 npm i @types/jquery # @types 是npm的一个分支，用来存放 *.d.ts文件声明文档 在React中使用TS 接口 类中的状态及属性接口 import { Component } from 'reac

先执行npm run eject 来暴露配置文件 需要注意的是如果run eject确保你当前项目的git没有待缓存的文件(一定要commit完 ) 安装以下依赖 npm install postcss-loader --save npm install postcss-px-to-viewport --save 在config/webpack.config.js 搜索 ‘postcss-normalize’ require('postcss-px-to-viewport')({ viewportW

Android Studio 开发环境 React Native创建项目需要 java 开发环境 -> jdk （只需配置环境变量） gradle （只需配置环境变量） Android Studio 安装Android Studio Android Studio安装成功后如果弹出unable to access android sdk add-on list时 在Android Studio的安装目录下，找到\bin\idea.properties 在尾行添加disable.a

组件 在react native中没有html标签 只能使用组件 import React, {useState} from 'react' import {View, Text, Button, StyleSheet} from 'react-native' // 跟普通的Web的react不同 RN当中不能使用html标签 只能使用RN提供的组件 const App = () => { const [a, setA] = useState(5) const fn1 = () =>

路由 下载navigation依赖 npm i @react-navigation/native 下载栈路由依赖 npm i @react-navigation/native-stack npm i @react-navigation/elements # 如果缺少对应的模块就按照提示安装对应的模块 下载路由回收（普通屏幕和刘海屏） npm i react-native-screens react-native-safe-area-context 路由配置 import React from 'r