在这两天折腾主题的过程中,再次注意到伪静态的设置,之前刚建站时用的是最简单的404 错误重定向的方法:复制代码,新建成一个 404.php 丢到 web 根目录,然后到空间控制面板将其指定为 404 错误页面...当时,感觉这个方法最简单,也能达到效果,也就没去深究此法对 SEO 的影响,现在建站快一个月了,百度却仅仅收录了我的首页和一篇动态文章,我这才开始怀疑这个伪静态设置方法对百度 Seo 有很大影响(谷歌等搜索引擎无碍...这样看来,虽然没有确切证据证实这个说法,但是为了长久考虑,我还是决定选用其他伪静态的设置方法。...至于这个方法的原理以及 httpd.ini 的写法,网络上有大把大把的解说,我也就再不赘述了。...写这篇文章的主要目的是告诉跟我一样的菜鸟站长们,使用“404 伪静态”的方法会对百度的收录造成一定障碍,还请慎用之!当然,是否属实还得看我今天修改之后的效果如何了,静候佳音吧!
Context API 是 React 提供的一种在组件树中传递数据的方法,无需手动将 props 一层一层地传递下去。...嵌套 Context 在复杂的应用中,可能会有多个 Context 嵌套使用。这种情况下,需要注意嵌套的顺序和依赖关系。...解决方法 确保嵌套的 Provider 顺序正确,并且每个 Provider 的 value 都是独立的。...更新 Context 时的副作用 在使用 useContext 时,如果 Context 的值发生变化,可能会触发组件的重新渲染,从而导致副作用。 解决方法 使用 useEffect 来处理副作用。...通过合理设置默认值、优化性能、处理嵌套 Context 和副作用,可以有效避免常见的问题和易错点。
背景 本站建立时便未使用 WordPress 自带评论系统,原因主要是在有比较多的功能需求需要适配和实现的情况下,二次开发比较耗时费劲。...React 篇 参考前几篇文章,最近正在学习和入门 React.js 于是首先就没想过多地开始使用 React 进行开发了。...(Context); 子组件调用父组件方法 在 React 中直接将父组件方法作为参数传递至子组件调用即可。...状态数据更新 React 中使用 useState Hook 来在函数组件内创建数据 State 和更新 State 的函数,样例如下: const [resetStatus, setResetStatus...] = React.useState(false); setResetStatus(true); Vue 中更新对象类型的数据中的内容需要通过实例方法 Vue.
使用 Hook 后的代码简洁了很多。但是,使用 useState 不会把新的 state 和旧的 state 进行合并。 上面,我们只是用了一个 count。...不要以为 useEffect 和 componentDidMount、componentDidUpdate 和 componentWillUnmount 一样只能使用一次,他与 useState 一样,...设置定时器与清除定时器是放在一个API里面的,代码的耦合更高。更能体现这是一个整体,也避免了遗忘。 为什么要在 effect 中返回一个函数? 这是 effect 可选的清除机制。...期待他的到来,这将大大减少可能出现的bug。 其他 Hook 除了 useState 和 useEffect 两个常用的 Hook, 还有一些其他的 Hook, 这些可能用的不多。...答案是可以的,不过需要结合 useContext 来使用。掘金上面有码友给出了一个例子用 useContext + useReducer 替代 redux。
首先,将一个复杂的页面逻辑进行拆分的目的,一定是为了可读性和可维护性。如果你的组件拆分违背了这两个原则,那么拆分就有问题。...这一点非常重要,很少有人能够把这个事情做正确。混乱的状态管理,导致了代码非常糟糕。本来很简单的逻辑,可维护起来非常痛苦。太多的人没有去思考这个问题。...在顶层组件Provider中,我们只关心会被不同组件共享的数据。经过分析发现,只有首页和热门的未读标记数字,需要放在Provider中来处理。页面组件App和设置组件Setting都会使用到它们。...还需要显示未读的状态。实现如下: import React, {useContext, useState} from 'react'; import {ctx, Provider} from '....import React, { useState, useEffect, useContext } from 'react'; import {topViewApi} from '.
这样一来,React 就能在多个 useState 和 useEffect 调用之间正确保留 Hooks 的状态。...3 以正确的顺序创建函数组件 当创建类组件时,遵循一定的顺序可以帮助你更好地维护和改进 React 应用程序代码。 首先调用构造器并启动状态。然后编写生命周期函数,接着编写与组件作业相关的所有函数。...但是对于某些情况,例如构建一个简单的表单,最好将状态分组在一起,以便更轻松地处理更改和提交数据。 简而言之,你需要在多个 useState 调用和单个 useState 调用之间保持平衡。...React Context 是一项功能,它提供了一种通过组件树向下传递数据的方法,这种方法无需在组件之间手动传 props。...Hooks 是 React 库的重要补充,因为它允许你用独一无二的方式编写、重用和共享 React 代码。
使用 useState 方法,接收一个初始化参数,定义 state 变量,以及改变 state 的方法 在需要使用的地方直接使用 state 这个变量即可,增加事件处理函数触发改变 state 的方法...在父组件中调用,通过 props 传递 initialState 初始化值 用 useState 方法替换掉原有的 class 不仅性能会有所提升,而且可以看到代码量减少很多,并且不再需要使用 this...使用 useEffect 不仅去掉了部分不必要的东西,而且合并了 componentDidMount 和 componentDidUpdate 方法,其中的代码只需要写一遍。?...使用上下文 上下文定义完毕后,我们再来看使用 useContext 和不使用 useContext 的区别是啥?...children 这样通过 useContext 和 useState 就重构完毕了,看起来代码又少了不少?
设置相同的state值时setState会bailing out of update 如果setState接收到的新的state和当前的state是一样的(判断方法是Object.is),React将不会重新渲染子组件或者触发...和生命周期函数的设计理念还是存在本质上的区别的,如果一味用生命周期函数的思考方式去理解和使用useEffect的话,可能会引发一些奇怪的问题,大家有兴趣的话,可以看看React核心开发Dan写的这篇文章...组件,所以这些无用的渲染会影响到我们页面的性能,解决上面这个问题的方法有下面三种: 拆分Context 这个方法是最被推荐的做法,和useState一样,我们可以将不需要同时改变的context拆分成不同的...而由于useState返回的setState可以直接在任意地方设置我们状态的值,当我们组件的状态转换逻辑十分复杂时,它将很难debug,因为它是开放的状态管理。...状态定义在父级组件,不过需要在深层次嵌套的子组件中使用和改变父组件的状态,可以同时使用useReducer和useContext两个hook,将dispatch方法放进context里面来避免组件的props
React提供的Hook不算多,我们最常用的Hook要数useState,useEffect跟useContext了,其他的都是适用更加通用的或者更加边界的场景的Hook。...useEffect类似于向componentDidMount跟componentDidUpdate添加代码,我们常在这两个方法中设置网络请求或者Timer,现在统一写到一个地方就好了,同时我们也可以返回一个清理函数...最终我们要把这个状态值跟设置方法以数组的形式返回出去: return [ value, setState ] } 一个简单的Hook就实现了,Hook其实就是简单的js函数,用来执行一些有副作用的操作...,比如用来设置一个有状态的值。...但是紧接着,我们又发现,当我们想多调用几次useState来管理多个状态时,它总在往同一个全局变量上写值,所有的useState方法都在操作同一个value!这肯定不是我们想要的结果。
一般来说,在函数退出后变量就会”消失”,而 state 中的变量会被 React 保留。 「useState 需要哪些参数?」 useState() 方法里面唯一的参数就是初始 state。...(如果我们想要在 state 中存储两个不同的变量,只需调用 useState() 两次即可。) 「useState方法的返回值是什么?」 返回值为:当前 state 以及更新 state 的函数。...4. useContext Context 提供了一个无需为每层组件手动添加 props ,就能在组件树间进行数据传递的方法,useContext 用于函数组件中订阅上层 context 的变更,可以获取上层...遵守这条规则,你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。...自定义 Hook 是一种重用状态逻辑的机制(例如设置为订阅并存储当前值),所以每次使用自定义 Hook 时,其中的所有 state 和副作用都是完全隔离的。
Dan 用 Class 组件和 Function 组件对比的方式展示 Hooks 的强大功能,现场十分精彩,掌声欢呼频频。...因为函数也可以让我们在其作用域内设置 name 的值。那么 useState 到底是什么呢?useState 是一个 Hook。...用 class 和 hook 两种方式使用 React context 好的。我们再回到我们的 class 组件的例子。有没我们知道的其他的 React 特性呢?...(掌声和欢呼声) import React, { useState, useContext, useEffect } from 'react'; import Row from '....I —— 现状和问题 博客主题用腻了?
钩子来声明了一个名为 count 的状态变量,并将其初始值设置为 0。...# react 中 阻止事件传播 在 React 中,可以使用 event.stopPropagation() 方法来阻止事件的默认传播。...这个方法会阻止事件进一步冒泡到父元素或其他监听同一事件的子元素上。...如果你想要完全阻止事件的默认行为和冒泡,可以使用 event.preventDefault() 方法,它会取消事件的默认行为并停止事件在整个 DOM 树中的传播。...这些是 React Hook 的一些常用函数示例,包括 useState、useEffect 和 useContext。它们可以用于在函数组件中管理状态、执行副作用操作和访问上下文。
React暴露出来的部分Hooks //packages/react/src/React.js export { ......不要担心,说白了就是组件之间传值就完事了,那么你又说了,组件传值我们用props传递不就完毕了吗,为什么还要有这个,太天真。useContext提供的功能是可以跨层级的。...假如有ABCDE五个组件嵌套,你用props传值,是不是要A传到B...一直传到E,但是useContext就可以在E组件里面直接获取到A的状态,举个例子: const ComponentA = ()...:{count} ) } 这样才能在E组件里面拿到来自A组件的count,但是useContext提供了,直接拿的功能,例如: // 用createContext创建上下文...const ComponentE = (count) => { // 需要用到的组件里面用useContext接收 const [count, setCount] = useContext(Content
{ const [num,setNum] = useState(0) // useEffect相当于是一个生命周期 异步 // 组件渲染完成后和组件更新时 调用 // componentDidMount...} // 空数组[]时,就是当组件将被销毁时才进行解绑 // 实现了componentWillUnmount的生命周期函数 },[]) } 3.useContext和createContext...// 1引用userContext和createContext来传参 import React, { useState,useContext,createContext } from 'react';...{ console.log('小白来了') return name +'你喊了一声小白 小白走过来了' } //使用useMemo 两个参数第一个是渲染的组件的方法...获取React JSX中的DOM元素、用useRef来保存变量 import React,{useRef,useState,useEffect} from 'react'; // useRef获取React
React Hooks 是 React 16.8 引入的一项重要特性,它使函数组件能够拥有类组件的一些特性,例如状态管理和生命周期方法的使用。...主要的 Hooks 包括 useState, useEffect, useContext, useReducer, useCallback, useMemo, useRef, 和 useImperativeHandle...主要的 React Hooks useState useState Hook 允许你在函数组件中使用局部状态。它返回一个状态值和更新该状态值的函数。...const value = useContext(MyContext); useReducer - 用于更复杂的 state 逻辑,它接收一个 reducer 函数和初始状态,然后返回当前的状态和派发...使用 ESLint 插件:React 官方提供了 eslint-plugin-react-hooks 插件来帮助你检查 Hook 的使用是否正确。 5.
一、React 的两套 API 以前,React API 只有一套,现在有两套:类(class)API 和基于函数的钩子(hooks) API。 任何一个组件,可以用类来写,也可以用函数来写。...也就是说,组件的状态和操作方法是封装在一起的。如果选择了类的写法,就应该把相关的数据和操作,都写在同一个 class 里面。 ? 类组件的缺点 大型组件很难拆分和重构,也很难测试。...业务逻辑分散在组件的各个方法之中,导致重复逻辑或关联逻辑。 组件类引入了复杂的编程模式,比如 render props 和高阶组件。...下面是 React 默认提供的四个最常用的钩子: useState() useContext() useReducer() useEffect() 1、useState():状态钩子 ---- useState...正确的写法是将它们分开写成两个 useEffect() function App() { const [varA, setVarA] = useState(0) const [varB, setVarB
接着我们继续来介绍剩下的hooks吧 useReducer 作为useState 的替代方案。...它接收一个形如(state, action) => newState 的 reducer,并返回当前的 state 以及与其配套的 dispatch 方法。...(也就是useReducer+useContext代替Redux) 如果你用应用程序比较大,希望UI和业务能够分开维护 登录场景 举个例子?...和useContext以及React.createContext API,我们可以实现自己的状态管理来替换Redux 实现react-redux react-redux:React Redux is the...简单理解就是连接组件和数据中心,也就是把React和Redux联系起来,可以看看官方文档或者看看阮一峰老师的文章,这里我们要去实现它最主要的两个API Provider 组件 Provider:组件之间共享的数据是
一般来说,在函数退出后变量就就会”消失”,而 state 中的变量会被 React 保留。 useState 方法里面唯一的参数就是初始 state。...数据获取,设置订阅以及手动更改 React 组件中的 DOM 都属于副作用。React 组件中常见副作用一般分不需要清除和需要清除两种类型。...除非你正在做懒加载,否则避免在渲染期间设置 refs —— 这可能会导致意外的行为。相反的,通常你应该在事件处理器和 effects 中修改 refs。...这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。 只在 React 函数中调用 Hook。...只有 Hook 的调用顺序在每次渲染中都是相同的,React 才能正确地将内部 state 和对应的 Hook 进行关联,它才能够正常工作。
但必须遵循前面两条规则 # useState useState 方法是常用的 React Hooks 之一。...该 Hook 被归类为 React 中的受控组件中,useState 方法设置了一个初始值,可以随着用户执行操作而更新。...useEffect 有两个参数(箭头函数和可选的依赖项数组),用于异步操作。 依赖项数组是可选的,不传入数组时,回调函数会在每次渲染后执行,传入空数组时,回调函数只会在组件挂载和卸载时执行。...依赖项数组可以接受任意数量的值,这意味着对于依赖项数组中更改的任何值,useEffect 方法将再次运行。...如果没有必要进行同步的操作,建议使用 useEffect 来代替,以获得更好的性能和更流畅的用户体验。