![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
前端精髓
公众号【前端精髓】
展开
-
redux-saga的使用
redux-saga 是一个用于管理应用程序副作用(例如异步获取数据,访问浏览器缓存等)的库,它的目标是让副作用管理更容易,执行更高效,测试更简单,在处理故障时更容易。你可能已经用了 redux-thunk 来处理数据的读取。不同于 redux thunk,你不会再遇到回调地狱了,你可以很容易地测试异步流程并保持你的 action 是干净的。Reducers 指定了应用状态的变化如何响应 ac...原创 2019-12-17 15:23:42 · 312 阅读 · 0 评论 -
redux-thunk的使用和原理
redux-thunk是一个redux中间件,原理如下function createThunkMiddleware(extraArgument) { return ({ dispatch, getState }) => (next) => (action) => { if (typeof action === 'function') { return a...原创 2019-12-16 19:36:01 · 1966 阅读 · 0 评论 -
useImperativeHandle的使用
你不能在函数组件上使用 ref 属性,因为它们没有实例:import React, { Component } from 'react';function MyFunctionComponent() { return <input />}class Parent extends React.Component { constructor(props) { s...原创 2019-08-26 15:46:57 · 6859 阅读 · 1 评论 -
useRef() 比 ref 属性更有用。它可以很方便地保存任何可变值
只在更新时运行 effect这是个比较罕见的使用场景。如果你需要的话,你可以 使用一个可变的 ref 手动存储一个布尔值来表示是首次渲染还是后续渲染,然后在你的 effect 中检查这个标识。(如果你发现自己经常在这么做,你可以为之创建一个自定义 Hook。)function Example () { const [count, setCount] = useState(0); co...原创 2019-08-23 14:30:18 · 25418 阅读 · 0 评论 -
vue和react中props变化后修改state
如果只想在 state 更改时重新计算某些数据,比如搜索框案例。vue<template> <div> <input type="text" v-model="filterText"> <ul> <li v-for="item in filteredList" :key="item.id"> ...原创 2019-08-17 13:25:59 · 1452 阅读 · 0 评论 -
vue使用slot分发内容与react使用prop分发内容
vue将 <slot> 元素作为承载分发内容的出口// layout.vue<div class="container"> <main> <slot></slot> </main></div>当组件渲染的时候,<slot></slot> 将会被替换该组件起始标签和...原创 2019-08-16 14:38:49 · 735 阅读 · 0 评论 -
react生命周期
React生命周期分为3个阶段:挂载,更新,卸载挂载当组件实例被创建并插入 DOM 中时,其生命周期调用顺序如下:constructor()static getDerivedStateFromProps()render()componentDidMount()更新当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下:static get...转载 2019-08-20 13:08:05 · 101 阅读 · 0 评论 -
useEffect使用的介绍
如果你熟悉 React class 的生命周期函数,你可以把 useEffect Hook 看做 componentDidMount,componentDidUpdate 和 componentWillUnmount 这三个函数的组合。实现一个 componentDidMount 的功能function Demo () { useEffect(() => { consol...原创 2019-08-23 18:27:05 · 5018 阅读 · 0 评论 -
深入浅出redux知识
redux状态管理的容器。开始使用定义类型action-typesexport const INCREMENT = 'INCREMENT'export const DECREMENT = 'DECREMENT'定义actionsimport * as Types from './action-types'let actions = { increment() { ...原创 2019-06-12 11:37:27 · 218 阅读 · 0 评论 -
React函数组件和类组件的区别
定义组件有两个要求:组件名称必须以大写字母开头组件的返回值只能有一个根元素函数组件function Welcome (props) { return <h1>Welcome {props.name}</h1>}ReactDOM.render(<Welcome name='react' />, document.getElementById(...原创 2019-06-08 11:56:13 · 22520 阅读 · 1 评论 -
React的类型检查
要在组件中进行类型检测,你可以赋值 propTypes 属性。定义类型import PropTypes from 'prop-types';MyComponent.propTypes = { // 你可以声明一个 prop 是一个特定的 JS 原始类型。 // 默认情况下,这些都是可选的。 optionalArray: PropTypes.array, // 数组 opt...原创 2019-06-07 17:43:54 · 1764 阅读 · 0 评论 -
PureComponent使用方法
React.PureComponentReact.PureComponent 类似于 React.Component。它们的不同之处在于React.Component 没有实现 shouldComponentUpdate(),但是 React.PureComponent实现了它。采用对属性和状态用浅比较的方式。import React, { Component, PureComponent }...原创 2019-05-06 19:44:10 · 5355 阅读 · 0 评论 -
React中的Context上下文
Context 提供了一个无需为每层组件手动添加 `props`,就能在组件树间进行数据传递的方法。原创 2019-05-04 21:26:23 · 689 阅读 · 0 评论 -
react转发refs到DOM 组件
Ref 转发是一个可选特性,其允许某些组件接收 ref,并将其向下传递(换句话说,“转发”它)给子组件。原创 2019-04-28 16:42:07 · 547 阅读 · 0 评论 -
react回调refs更新过程中执行两次
如果 ref 回调函数是以内联函数的方式定义的,在更新过程中它会被执行两次,第一次传入参数 null,然后第二次会传入参数 DOM 元素。这是因为在每次渲染时会创建一个新的函数实例,所以 React 清空旧的 ref 并且设置新的。通过将 ref 的回调函数定义成 class 的绑定函数的方式可以避免上述问题,但是大多数情况下它是无关紧要的。内联函数的方式定义class CustomTextI...原创 2019-04-28 15:33:55 · 2430 阅读 · 0 评论