1、在构造函数内使用bind绑定this import React, { Component } from "react"; class Click extends Component { constructor(props){ super(props) this.hanldeClick = this.hanldeClick.bind(this) } hanldeClick(){ console.log("构造函数内使用bind绑定this") } render() { return <button onCl…
redux 仅仅是用来管理组件的状态，需要满足以下条件： 用户使用方式复杂 不同的用户、不同使用方式（普通用户和管理员）； 多个用户之间的协作； 与服务器有大量的交互； View有多个数据源。 其他场景下，能不用redux就不用，否则增加项目的复杂度。 三大特征： 单一的数据源，整个应用的state都存储与store对象中； state只读，只有触发Action（用于描述发生的事件）才能改变state； 使用纯函数（函数的返回值只能依赖于它的参数，相同的输入，只能得到相同的结果）执行修改。 由三个部分构成： 1. …
生命周期： componentWillMount componentDidMount componentWillReceiveProps shouldComponentUpdate componentWillUpdate componentDidUpdate componentWillUnmount 错误处理 componentDidCatch(): react 16 的Portals特性，将组件渲染到当前组件树以外的DOM节点上。例如应用的全局弹框。 ReactDOM.createPortal(child,con…
constructor ====> 使用useState来初始化state componentDidMount ====> 使用useEffect传入第二参数为[]来实现； componentDidUpdate ====> useEffect传入第二个参数为空或者是值为变动的数组； componentWillUnmount ====> 清除副作用，在useEffectreturn一个函数来模拟 shouldComponentUpdate ====> 使用React.memo 包含一个数…
JavaScript的DOM树 DOM是结构化文本的抽象表达方式，在一个特定的web环境中它就是HTML文本，HTML中的每一个元素在DOM中有一个对应的节点，而且在HTML中的元素是存在包含关系，DOM节点就构成一个树型结构，称之为DOM树。 浏览器为了渲染和HTML格式的网页，会先把HTML文本解析为DOM树，再根据DOM树渲染出用户所看到的界面，当需要改变的界面的时候，就要修改DOM树上的节点。 浏览器渲染的步骤 构建DOM树,display:none的元素也在DOM树中，只是被隐藏起来了； 构建CSSOM树…
在react应用中，可以使用两种方式来定义组件：函数和class类， 函数组件 class类组件 当react应用在渲染我们所定义的组件之后，react会把jsx接收到的属性或者子组件转化为单个对象传递给组件，这个对象就是“props”。props只是用来接收父组件传给子组件的参数而已，它并不是组件本身自己的数据，所以组件的Props具有不可更改的特征，这就是react的一个规则： 所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。 组件如何接收接收props？ 先说我们常见的函数组件，和我…
connect函数是连接React组件和Redux Store，连接操作过程中不会改变原来的组件，而且返回一个已经与Store连接的新组件。 connect常见的两个参数： 1、mapStateToProps(state,[ownProps]),在定义该函数时，组件会监听Store的变化，只要Store发生变化，mapStateToProps函数就会被调用并且必须返回一个纯对象，该对象会和组件的Props合并。mapStateToProps的参数ownProps。表示传递到组件的Props，也就是每次更…
官方的描述:JSX是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。它没有任何语义,专门提供给与处理器使用。 在react中声明组件的时候使用jsx,如以下声明的组件: HTML中的onclick和JSX中的onClick 在HTML直接使用onclick，会出现我们意想不到的bug【很意外啊！】： onclick添加的事件函数是在全局环境中…
当我们创建好一个react应用之后,react应用创建的第一个组件会使用到react、React DOM和prop-types。 React DOM是ｒｅａｃｔ的渲染器，将组件渲染成为ＤＯＭ或者是服务器端渲染的字符串； prop-types的作用是对给组件传递的数据做一个类型检测。 构建react生成的第一个组件 调用React DOM的render方法来创建和管理组件，render方法需要两个参数，一个是应用需要渲染的react组件【ReactElement类型的元素】，另一个就是整个应用的容器【DOMEleme…
最快体验ｒｅａｃｔ，不需要进行繁琐的配置，使用create-react-app创建ｒｅａｃｔ应用。如果电脑上没有安装node的话，需要重新安装node的环境，node本身自带的npm，直接使用即可。 １、安装create-react-app: npm install -g create-react-app 查看create-react-app的版本： create-react-app --version 2、使用create-react-app创建react应用： create-react-app myApp 在创…
