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、初始化在组件初始化阶段会执行constructorstatic getDerivedStateFromProps()componentWillMount() / UNSAFE_componentWillMount()render()componentDidMount()2、更新阶段props或stat

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

PortalPortals 提供了一个最好的在父组件包含的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-routerReact Router现在的版本是6，使用方式相对于之前版本的思想有所不同。之前版本的思想是传统的思想：路由应该统一在一处渲染， Router 4之后是这样的思想：一切皆组件React Router包含了四个包:包名Descriptionreact-routerReact Router核心apireact-router-domReact Router的DOM绑定，在浏览器中运行不需要额外安装react-routerreact-router

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

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

Redux-Toolkit一个官方提供用于Redux高效开发的、有想法的、功能齐全的工具包#安装npm i @reduxjs/toolkit#oryarn add @reduxjs/toolkityarn add react-redux # 安装插件yarn add redux-devtools -D # 安装调试工具，-D安装开发依赖Redux-Toolkit 的使用// store.jsimport { 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 = arrObject.assign() 只是一级属性复制，只比浅拷贝多了一层深拷贝复制一个新的对象const obj1 = JSON.parse(JSON.stringify(obj)) 数组、对象都好用 （缺点:不能有undefined）Immutable优化性能Immutabl

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

Lazy 和 Suspense1、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 --savenpm 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 StudioAndroid 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-stacknpm i @react-navigation/elements # 如果缺少对应的模块就按照提示安装对应的模块下载路由回收（普通屏幕和刘海屏）npm i react-native-screens react-native-safe-area-context路由配置import React from 'r