weixin_44486539的博客

高阶组件是 React 中复用组件逻辑的一种技巧，高阶组件是一个函数，接收需要包装的组件，返回值为增强后的组件。实现思路：高阶组件内部创建一个类组件，在这个类组件中去提供复用状态的逻辑代码，通过 prop 将复用的状态组件传递给被包装组件。创建高阶组件步骤：创建一个函数，名称约定以 with 开头给函数设置形参用于接收传过来的组件，参数以大写字母开头（作为参数组件使用）在函...

React 中组件复用主要有两种模式，一种是高阶组件另一种就是 render props 模式这两种方式并不是新的 API ，而是利用 React 自身特点的编码技巧，演化而来的固定模式render props 模式是一种非常灵活并且复用性非常高的模式，可以将一些特定的行为或功能封装成一个组件供别的组件使用。主要实现思路：将要复用的 state 状态和操作 state 的方法封装到一个...

有时在组件之间进行传递数据时需要对数据的类型进行校验，react 中提供了类型检查的模块 prop-types 通过该模块可以对传递的数据进行类型检测，出于性能方面的考虑，propTypes 仅在开发模式下进行检查。使用方法：使用时首先要导入该模块：import PropTypes from 'prop-types'导入完成后，为接收数据的组件设置类型检查：// myCompo...

在 react 中给 input 添加了 value 属性这个表单控件就会成为受控组件，如果不想成为受控组件又想设置默认的 value 值，可以通过 react 提供的 defaultValue 属性来设置import React from 'react'import ReactDOM from 'react-dom'class CommentList extends React.Comp...

非父子之间的通信可以通过状态提升的方式来解决，但是当组件嵌套太深时就比较麻烦了，这时可以使用 react 中的上下文来解决（实际开发中使用状态管理工具 redux）通过 react 的 createContent() 方法创建一个 context（上下文）；这个上下文里面有两个组件 Provider 和 ConsumerProvider：提供者，用于提供数据Consumer：消费者，使用数...

没有受 React 控制，没有设置 value 属性的组件就是非受控组件；如果想要获取非受控组件中的值需要通过 DOM 操作，通过 ref 属性来获取。步骤：首先在 constructor 构造中创建一个引用let iptRef = React.createRef()在组件中通过 ref 将表单和引用绑定在一起<input ref={this.iptRef} />...

在 React 中不能直接修改组件的状态，需要通过 setState() 来进行修改语法：setState(updater[, callback])updater 更新器callback 更新后执行的回调函数修改状态比如想要将 state 中的 content 值修改为 ‘香香’state = { content: '大熊'}通过直接修改的方式并不能触发视图的更新:...

在 React 中，标签的 class 属性要用 className 代替；行内的样式属性需要使用对象的形式书写，多个单词组成的属性使用驼峰式命名；最终要用 {} 在最外层对样式进行包裹；<able 标签的 for 属性要替换成 htmlFor。示例：main.css* { margin: 0; padding: 0;}.box { width: 200px; ...

所谓的“受控组件”简单来说就是组件的状态受 React 控制。在 HTML 中，表单元素（如<input>、 <textarea> 和 <select>）之类的表单元素通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。...

文章目录注册事件事件处理函数中 this 问题事件传参获取事件对象注册事件React 元素的事件处理与 DOM 元素有些不同，React 通过事件绑定属性的方式注册事件时要采用驼峰式命名，其对应的属性值为一个函数而不是字符串。示例：import React from 'react'import ReactDOM from 'react-dom'class Hello extends ...

组件是 React 的核心，是 View 的重要组成部分；React 中的组件分为两种：一种是函数组件（使用函数来创建组件），另一种是类组件（通过类创建的组件）。通过函数来定义组件通过函数定义的组件被称为无状态组件，在定义时函数名称的首字母必须要大写，React 在解析时会按照组件的形式去解析函数值必须要有返回值，返回值为 jsx 语法；使用时将函数名作为标签使用，可以是单标签 <ta...

打开浏览器控制台，在 Elements 中会发现，只有数据改变的部分 DOM 才会进行更新；是因为在 react 中，数据发生改变时是通过虚拟 DOM 更新的；当数据发生改变时，会用最新的数据去修改模板形成新的虚拟 DOM，新的虚拟 DOM 和旧的 虚拟DOM 通过 diff 算法进行比较找到需要更新的地方进行更新#### Diff 算法在 React 中有两种假设：两个不同类型的元素会产生不同的树开发者可以通过 key 属性指定不同树中没有发生改变的子元素

jsx语法是 react 的模板语法，是 react 的灵魂；通过该语法可以很方便的创建 react 对象jsx 不是字符串也不是 html，就是 react 对象，其底层就是 React.createElement()；所以使用 jsx 语法时还是要引入 react 核心包jsx 只能有一个根节点；所以多个根节点时要再用一个元素将其包起来或者使用 <> </> 将其包...

渲染 react 元素，首先要引入相关的包// 导入核心包；用于创建 react 对象import React from 'react'// 用于将 react 对象渲染成 DOMimport ReactDOM from 'react-dom'创建 react 元素语法：React.createElement(type, [props], [....

全局安装 yarn（Yarn是facebook发布的一款取代npm的包管理工具）npm install yarn -g查看版本号：yarn --version使用脚手架初始化一个项目的步骤安装相关的脚手架：create-react-app执行全局安装命令：yarn global add create-react-app或npm install create-react-...