祥哥的说

一、jsx基本知识串讲1、2、vue:react:3、7-7 React父子组件通讯7-8 setState为何使用不可变值 ******

1、React16.3之前和之后生命周期的区别，为什么要这样做

和都是 React 中的生命周期方法，用于在组件渲染过程中进行状态管理和数据处理。方法是 React 16.3 新增的生命周期方法，用于在 props 发生变化时更新组件的 state。该方法接收两个参数：props 和 state，返回一个对象用于更新组件的 state。这个方法的主要作用是在组件挂载时和更新时都会被调用，允许组件在不同的状态下更新自己的 state。需要注意的是，使用如果上述两种情况都不满足，就没有必要使用方法来更新组件的 state。

是自定义的对比函数，它接受前一个 props 对象和后一个 props 对象作为参数，并返回一个布尔值。如果不传入第二个参数，则会使用默认的浅比较函数进行对比。方法对比 props 是否相同，该方法会进行浅比较，只对比 props 的第一层属性是否相等，如果属性值是对象或数组等引用类型，则只比较它们的。的实现原理是对比组件的前后两次渲染传入的 props 是否相等，如果相等则不会触发重新渲染，否则会触发。是 React 中用于函数组件优化的高阶组件，可以在一定程度上减少组件的重渲染，提升应用性能。

是一种 React 组件，它可以在其子组件树的渲染期间捕获 JavaScript 异常，并且可以渲染出备用 UI。如果一个错误边界无法渲染错误信息，则错误会冒泡至最近的上层错误边界，这也类似于 JavaScript 中。5、React 不需要错误边界来捕获事件处理器中的错误。参数包含有关组件引发错误的组件堆栈的信息。，不同的地方在于错误边界只针对 React 组件。1、错误边界可以捕获发生在整个子组件树的渲染期间、生命周期方法以及构造函数中的错误。生命周期方法在错误边界内的任何子组件抛出错误时被调用。

connect 方法connect 是一个函数，绑定 State 到 View。import React from 'react'import {render} from 'react-dom'import {connect} from 'react-redux'import {bindActionCreators} from 'redux'import action from 'action.js' class App extends React.Component{ render()

通过 ref 来手动获取上一轮props或者state的值：function Counter() { const [count, setCount] = useState(0); const prevCountRef = useRef(); useEffect(() => { prevCountRef.current = count; }); const prevCount = prevCountRef.current; return <h1>Now:

组件逻辑复用的三种方案一、复用组件逻辑的方案二、3种复用组件逻辑方案的优劣对比一、复用组件逻辑的方案HOC：高阶组件Render PropsHooks1、通过高阶组件HOC复用组件逻辑import React from 'react'// 高阶组件const withMouse = (Component) => { class withMouseComponent extends React.Component { constructor(props) {

一、useState初始化值，只有第一次有效开发遇到的场景：（1）父组件请求结果传给子组件，作为子组件列表state的默认值，用于渲染。（2）子组件自己的二次请求，将请求结果进行set更新列表state，用于渲染。（3）当时的想法：子组件自己维护二次请求结果，父组件触发请求时，通过改变子组件的默认值，将列表数据更新到子组件。用下面的例子说明这个问题的坑在哪里：import React, { useState } from 'react'// 子组件function Child({ us

背景：子组件传递两个属性，一个是数据属性useInfo，一个是函数属性onChange当父组件的number更新之后，子组件虽然不依赖number，但仍旧被强制更新。优化方案：1、类组件处理：SCU优化class Children extends Component { shouldComponentUpdate(nextProps) { if(this.props.useInfo !== nextProps.useInfo) { return true .

14-1 出几道React-Hooks面试题14-2 class组件存在哪些问题14-3 用useState实现state和setState功能14-4 用useEffect模拟组件生命周期14-5 用useEffect模拟WillUnMount时的注意事项14-6 useRef和useContext14-7 useReducer能代替redux吗import React, { useReducer } .

1、什么场景需要用React Portals（传送门）Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。ReactDOM.createPortal(child, container)第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或 fragment。第二个参数（container）是一个 DOM 元素。2、使用方法3、使用场景一个 portal 的典型用例是当父组件有overflow: hi..

React中setState的有关问题1、react的setState是如何更新的？2、setState是同步的还是异步的？3、setState什么时候合并，什么时候不合并？核心要点：1、react的setState是如何更新的？setStated的执行原理：setState接收一个新的状态该接收到的新状态不会被立即执行么，而是存入到pendingStates（等待队列）中判断isBatchingUpdates（是否是批量更新模式）1>. isBatchingUpdate

React-组件公共逻辑抽离的两种方式高阶组件Render Props以获取鼠标位置的公共逻辑为例：1、高阶组件import React from 'react'// 高阶组件const withMouse = (Component) => { class withMouseComponent extends React.Component { constructor(props) { super(props)

使用流程：生产消费import React from 'react'// 创建 Context 填入默认值（任何一个 js 变量）const ThemeContext = React.createContext('light')// 底层组件 - 函数是组件function ThemeLink (props) { // const theme = this.context // 会报错。函数式组件没有实例，即没有 this // 函数式组件可以使用 Consumer

不使用 JSX 的 React每个 JSX 元素只是调用 React.createElement(component, props, ...children) 的语法糖。因此，使用 JSX 可以完成的任何事情都可以通过纯 JavaScript 完成。使用对比：用 JSX 编写的代码：class Hello extends React.Component { render() { return <div>Hello {this.props.toWhat}</div&

先列个大纲，目标：分析每中方案的实践应用，以及实现思路，优缺点。1、redux2、mobx3、dva4、hook

react的事件机制实现原理

目的：在 super() 被调用之前，子类是不能使用 this 的，ES6 要求，子类的构造函数必须执行一次super函数，否则 JavaScript 引擎会报错。传递 props 给 super() 的原因则是便于(在子类中)能在 constructor 访问 this.props。super是什么？怎么用？super是关键词角色：1、当函数使用。 2、当对象使用。1、super当函数使用super作为函数调用时，代表调用父类的构造函数。ES6 要求，子类的构造函数必须执行一次super函数

一、在React元素绑定事件要注意的三点1、React中事件的命名采用驼峰命名法，而不是原生dom中的小写。如：onclick要写成onClick,onchange要写成onChange2、使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是以dom字符串的形式在dom中：<button οnclick=“clickMe()”>不服点我</button>React中:<button onClick={clickButton}>不服点我&l

React中常见的组件类型及分类：1、展示组件(Presentational component) 与 容器组件(Container component)2、类组件(Class component) 与 函数式组件(Functional component)3、受控组件（Controlled Component ）与 非受控组件（Uncontrolled Component ）4、高阶组件(higher order component)1、展示组件(Presentational compone

Refsrefs，我的理解就是react提供的一种方式或者工具。refs的作用：访问DOM节点访问React元素为什么要使用refs？在某些情况下，你需要在典型数据流之外强制修改子组件。被修改的子组件可能是一个 React 组件的实例，也可能是一个 DOM 元素。对于这两种情况，可以使用react提供的refs来获取需要的目标元素或者实例。什么时候使用refs?记录一个项目中用到的场景：使用refs获取react的ScrollView的组件实例，从而使用组件的scrollTo方法。代码

react diff

changeHandle = (f, s) => { console.log('888:',f) console.log('999:',s) }Item.itemContent.map(item => { return <li key={item.name} className={classname({'active': thi...

Webpack是目前基于React和Redux开发的应用的主要打包工具。我想使用Angular 2或其他框架开发的应用也有很多在使用Webpack。当我第一次看到Webpack的配置文件时，它看起来非常的陌生，我非常的疑惑。经过一段时间的尝试之后我认为这是因为Webpack只是使用了比较特别的语法和引入了新的原理，因此会让使用者感到疑惑。这些也是导致Webpack不被人熟悉的原因。因为刚开始使...

  需要安装的软件node.jsnpm包管理以上两个包的下载地址如下：https://nodejs.org/dist/v6.3.0/node-v6.3.0.pkg由于6.3.0版本之后会自带npm的包管理所以不需要单独的安装npm更换npm库的源由于国内的网络原因，推荐只用阿里的npm源地址npm config set registry https://registry.npm.taobao....

一、创建基本目录结构1.新建项目工程：PockerUI2.配置jsx3.安装 webpack在此之前你应该已经安装了 node.js.npm install webpack -g1参数-g表示我们将全局(global)安装 webpack, 这样你就能使用 webpack 命令了.webpack 也有一个 web 服务器 webpack-dev-server, 我们也安装上npm ins...

前言WebStorm作为目前最流流行的前端IDE, 无论从运行速度还是开发的便捷性，无形之中提高了工作效率，目前比较火爆的React也越来越被众多开发人员所采纳，但是WebStorm下的React工程经常会出现很多警告以及转换提示，下面我就对此做一些整理，方便更多同志使用。React Library支持点击下载按钮，下来所需要的react library:激活所选library, 应用即可支持JS...

阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别           / 编辑 删除 今天来看看前端的冒泡和事件默认事件...

react组件 -- React.createClass()方法1、React.createClass()方法用于生成一个组件类2、所有组件类都必须有自己的render方法，用于输出组件3、假如生成一个组件类HelloMessage，模板插入&lt;HelloMessage /&gt;时，会自动生成组件类HelloMessage的一个实例4、组件类的第一个字母必须大写，否则会报错，比如HelloW...

在开发react应用时，应该没有人用传统的方法引入react的源文件(js)，然后在html编辑吧。大家都是用webpack + es6来结合react开发前端应用。这个时候，我们可以手动使用npm来安装各种插件，来从头到尾自己搭建环境。比如：npm install react react-dom --savenpm install babel babel-loader babel-core b...

强烈推荐30个原生JavaScript的demo，包括canvas时钟特效、自定义视频播放器、搜索栏快速匹配、fetch访问资源、console调试技巧等，先fork后学习，详见点击打开链接，欢迎点赞~~~谢谢，共同进步学习！前端新手如何安装webstorm ，初步搭建react项目下载安装webstorm:配置成功:配置成功后就可以开启webstorm项目了。（存微信收藏、、）...

1、react是一个用于构建用户界面的JavaScript库，主要用于构建UI界面。语法：注释：要用花括号，包含在div元素内，要嵌套多个HTML标签时使用div包括。 ReactDOM.render( &lt;div&gt; &lt;h1 style={mystyle}&gt;sun&lt;/h1&gt;{/*我是注释*/} ...

先上完整代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>Hello World</title> <script src="https://unpkg.com/react@16/umd/react.deve...

applyMiddlewares：它是 Redux 的原生方法，作用是将所有中间件组成一个数组，依次执行。https://blog.csdn.net/liwusen/article/details/76349811二、applyMiddleware的两种写法因此在applyMiddleware的时候，就会存在两种写法，这里我们以利用redux-thunk为例。（1）直接调用a...

先看一个官网中的时钟例子：class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; }//组件的挂载钩子函数 componentDidMount() { this.timerID = setInterv...

根据需求，前端页面有时需要动态展示后端返回的代码，但是此时的代码是字符串类型，直接展示，页面显示的只是字符串，这时就用到了react标签属性dangerouslySetInnerHtml属性；dangerouslySetInnerHtml用法：dangerouslySetInnerHtml = {__html:'这里是后端返回字符串代码'}在使用reactjs库的时候，会遇到将一段...

<label htmlFor="markdown-content"> Enter some markdown </label> <textarea id="markdown-content" onChange={this.handleChange} ...

使用JSX语法添加样式：使用style={{color:'red'，width:'300px'}}注意点：（1）使用双花括号。（2）属性值要使用时引号字符串形式。（3）多个样式属性使用“，”隔开。ReactDOM.render(<Cascader style={{color:'red'}} options={options} onChange={onChange} changeO...