React
关注
分享
扫一扫
文章平均质量分 56
追求极简语言、在意文章排版、提高阅读舒适性，轻轻松松把React相关概念弄明白。
Learn-anything
追求极简语言，说明事物因果！
展开
-
学习React，从这篇文章开始
一、React是什么？React 是基于 JavaScript 的用户界面库，可灵活组合元素(html标签)并渲染到HTML中某个指定DOM元素下。JSX 是React定义的一种 标签式 扩展语法，用 JSX 编写的元素和组件，通过预处理器 babel 解析，再交给 React 渲染到HTML中指定节点下，最终形成 HTML 文件。当然React不强制要求使用 JSX ，但 JSX 确实带来了更多便利。JSX怎么使用？详情，看这里！二、怎么安装和使用React怎么原创 2021-11-19 08:20:47 · 69 阅读 · 0 评论 -
React的高阶组件怎么用？
一、高阶组件是什么？高阶组件（HOC）是一个接收组件作为参数并返回新组件的函数。将多个组件的相同逻辑代码，抽象到HOC中，让组件更有结构化，更易于复用。HOC不破坏传入组件的特性，只通过组合形成新组件。HOC是纯函数，没有副作用。二、高阶组件实例接受了组件WrappedComponent，增加了订阅和数据刷新的操作。// 此函数接收一个组件...function withSubscription(WrappedComponent, selectData) { // ...并返回另一个组件原创 2021-11-19 08:20:34 · 1188 阅读 · 0 评论 -
React的安装和使用
一、React库说明React库包含两部分：1、React包含了所有基本功能；2、ReactDOM只包含了操作DOM的功能。1、加载React库# 1、用<script>加载开发版：<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>发布版：<!-- <script src="https://unpkg.com/react@16原创 2021-11-18 07:32:47 · 334 阅读 · 0 评论 -
React的顶层API有哪些？
一、简介React库提供了如下API，可直接调用。二、创建元素1、createElement()功能：创建 React 元素。// 函数原型React.createElement( type, [props], [...children])两种创建元素的方式：使用JSX来创建元素，不需要调用createElement()，预处理器babel会处理// 使用jsx创建元素和组件class Hello extends React.Component原创 2021-11-18 07:32:17 · 165 阅读 · 0 评论 -
React的组件生命周期详解
一、简介React组件都要经历三个阶段：挂载、更新、卸载。每个阶段都包含 “生命周期方法”，重写这些方法，就可以在特定的阶段执行特殊操作。二、生命周期图三、class组件的3个生命周期方法class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } //原创 2021-11-18 07:32:06 · 117 阅读 · 0 评论 -
React的元素和组件用法详解
一、元素React 的最小单位是元素，一旦创建，其子元素、属性等都无法更改。// 假设 HTML 文件中有个元素：<div id="root"></div>// 创建element元素，传递给React渲染，并加载到父容器(id=root)下const element = <h1>Hello, world</h1>;ReactDOM.render(element, document.getElementById('root'));二、原创 2021-11-18 07:31:56 · 214 阅读 · 0 评论 -
React的受控组件用法详解
一、受控组件是什么？用state来获取和设置输入元素值的组件，称之为受控组件。<input type="text">, <textarea> 和 <select> 等标签都可用 value 属性，来实现受控组件。二、有哪些受控组件？1、input- 阻止表单提交class NameForm extends React.Component { constructor(props) { super(props); this.原创 2021-11-18 07:31:36 · 1755 阅读 · 0 评论 -
React的列表组件必须要有key？
一、列表组件没有key属性会warning？1、key提高性能当创建列表组件时，必须给每一个元素设置 key 属性，否则会有警告： a key should be provided for list items。如果元素没有key属性，React很难判断元素应该怎么渲染？如果元素有key值，那么React只对匹配key值的元素，进行更改等渲染操作，这样极高提升了运行性能。二、列表组件使用说明1、错误用法function ListItem(props) { const value = pr原创 2021-11-18 07:31:04 · 512 阅读 · 0 评论 -
React的事件处理函数用法详解
一、简介页面交互必然会伴随事件的发生，譬如HTML中的一个button被点击了一下，接下来页面应该怎么反应？就是需要button的onClick事件函数来处理。二、使用方法1、事件函数怎么写？HTML标签 与 React元素，添加事件函数，分别怎么写？// 传统HTML的 click 事件函数写法< button onclick = "activateLasers()" > Activate Lasers</button >// React的 c原创 2021-11-18 07:30:43 · 375 阅读 · 0 评论 -
React的state用法详解
一、state是什么？state 是 class组件的内置对象，用于class组件内部数据更新，譬如可以封装一个Clock组件，每秒更新一次时间。二、怎么使用？1、使用state封装的Clock组件新建index.html文件，复制下面代码到index.html文件中，保存后用浏览器打开，就可以看到效果。<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title原创 2021-11-18 07:30:32 · 598 阅读 · 0 评论 -
React的State Hook用法详解
一、State Hook是啥？State Hook 就是指 useState 这个特殊函数，让你不用编写class，就可以使用state特性，换言之就是让 函数组件 拥有 state 特性，对数据进行动态更新。二、class中的state动态改变数据，譬如一个计数器组件，class组件中实现方式如下：class Example extends React.Component { constructor(props) { super(props);原创 2021-11-18 07:30:19 · 270 阅读 · 0 评论 -
React的ref是怎样调用其他元素？
一、State Hook是啥？State Hook 就是指 useState 这个特殊函数，让你不用编写class，就可以使用state特性，换言之就是让 函数组件 拥有 state 特性，对数据进行动态更新。二、class中的state动态改变数据，譬如一个计数器组件，class组件中实现方式如下：class Example extends React.Component { constructor(props) { super(props);原创 2021-11-18 07:30:07 · 275 阅读 · 0 评论 -
React的Reducer Hook让state有了状态
一、解决什么问题？useReducer 是 useState 的升级版本，对 setState 这个操作进行了拆分，可以根据不同类型，进行不同的逻辑计算，最后去改变 state 对象。1、实例：useReducer 实现计数器组件const initialState = { count: 0 };function reducer(state, action) { switch (action.type) { case 'increment': re原创 2021-11-17 09:16:35 · 152 阅读 · 0 评论 -
React的props用法详解
一、解决了什么问题？props是组件（包括函数组件和class组件）间的内置属性，用其可以传递数据给子节点。二、怎么使用？1、只读props在传递数据的过程中，是只读的不能修改。class App extends React.Component { // 第一步：给节点设置属性 `theme` render() { return <Toolbar theme="dark" />; }}function Toolbar(props) {原创 2021-11-17 09:16:25 · 2049 阅读 · 0 评论 -
React的Portal是干什么的？
一、解决了什么问题？React节点默认渲染到父节点下，Portal可以让节点渲染到非父节点的其他节点下面。Portal适用场景：当子组件需要从视觉上“跳出”其容器时，譬如对话框、悬浮卡、提示框等。二、用法说明1、React正常渲染节点render() { // React 挂载了一个新的 div，并且把子元素渲染其中 return ( <div> {this.props.children} </div>原创 2021-11-17 09:16:15 · 419 阅读 · 0 评论 -
React的Hook让函数组件拥有class组件的特性
一、解决了什么问题？Hook 是以 use 开头的特殊函数（useState、useEffect等），只能在 函数组件 内部使用。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。譬如 useState 就等同于 class组件中的state对象。1、库的更新说明Hook是React 16.8 新增特性， 在以下模块中包含了 React Hook 的稳定实现：React DOMReact NativeReact DOM ServerReact Tes原创 2021-11-17 09:16:04 · 163 阅读 · 0 评论 -
React的Fragment解决不必要的元素嵌套问题
一、解决了什么问题？在不额外创建 DOM 元素的情况下，让 render() 方法中返回多个元素，减少不必要的元素嵌套。二、用法说明1、问题下面的 Table 不能正常渲染，原因是 Colums 中夹杂了 <div> 元素。class Table extends React.Component { render() { return ( <table> <tr>原创 2021-11-17 09:15:54 · 137 阅读 · 0 评论 -
React的Effect Hook解决函数组件的性能问题和潜在bug
一、Effect Hook 是啥？Hook 是以 use 开头的特殊函数，让 函数组件 拥有 calss组件 的某些特性。Effect Hook 就是指 useEffect 这个特殊函数，它让 函数组件 能在渲染完成后执行自定义操作。useEffect 中要谨慎使用 useState，因为它会触发组件渲染后，再次调用 useEffect，形成一个死循环。正确方式：用条件语句包裹 useState 方法，定义了退出条件，避开死循环。二、3种使用方式让组件只监控特定数据的变更，再进行渲原创 2021-11-17 09:13:36 · 385 阅读 · 1 评论 -
React的Context对象解决props传递数据的烦恼
一、props 传递数据的烦恼作为子组件的 Toolbar 必须显式定义 theme 属性， ThemedButton 才能够获的 theme 数据。当 ThemedButton 与 App 之间嵌套了很多层，且使用ThemedButton 的页面又非常多，那么工作就会变的异常麻烦。class App extends React.Component { render() { return <Toolbar theme="dark" />; }}原创 2021-11-17 09:13:25 · 366 阅读 · 0 评论 -
React的class组件及属性详解
一、class组件React 有两种组件：class组件 和 函数组件。class组件需要继承 React.Component，用法如下：class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }}1、必须要重写的方法每一个继承 React.Component 的组件，都必须重写 render() 方法原创 2021-11-17 09:13:09 · 5652 阅读 · 0 评论 -
React用错误边界来捕获和处理异常错误
一、解决什么问题？UI 中 JavaScript 错误不应该导致整个应用崩溃，错误边界就是解决方案(React 16 增加的功能)。二、有哪些特性？1、定义可捕获子组件 JavaScript 错误，打印错误并展示备用UI的clas组件。2、无法捕获的错误：事件处理异步代码（例如 setTimeout 或 requestAnimationFrame 回调函数）服务端渲染它自身抛出来的错误（并非它的子组件）3、怎么写？错误边界是包含下面任意一个或两个方法 的class组件：原创 2021-11-17 09:12:57 · 557 阅读 · 0 评论 -
JSX是什么？
一、JSX是什么？JSX 是 JavaScript 的扩展语法，这种 <MyButton></MyButton> 标签的写法就是 JSX。JSX 编写的组件通过预处理器 babel 解析后，再交给 React 库渲染到指定父容器下，形成最终html页面。<MyButton color="blue" shadowSize={2}> Click Me</MyButton>上面 jsx 写的组件，被 babel 解析下如下代码原创 2021-11-17 09:12:38 · 1143 阅读 · 0 评论