lio_zero
lio_zero

React Hooks

Hooks 在 16.8 版本中被添加到 React，允许函数组件访问状态和其他 React 特性。因此，通常不再需要类组件。

尽管 Hooks 通常会替换类组件，但没有计划从 React 中删除类。

什么是 Hooks？

Hooks 允许我们“挂钩”到 React 特性，例如状态和生命周期方法。

import React, { useState } from 'react'
import ReactDOM from 'react-dom'

function FavoriteColor() {
  const [color, setColor] = useState('red')

  return (
    <>
      
我最喜欢的颜色是 {color}!

      
      
      
      
    
  )
}

ReactDOM.render(, document.getElementById('root'))

使用 React 提供的钩子前，我们需要从 react 中 import 钩子。

这里我们使用 useState 钩子来跟踪应用程序状态。状态通常指需要跟踪的应用程序数据或属性。

挂钩规则

钩子有 3 条规则：

  • Hooks 只能在 React 函数组件内部调用。
  • Hooks 只能在组件的顶层调用。
  • Hooks 不能是有条件的

注意：钩子在 React 类组件中不起作用。

下面我们来看看 React 提供的一些 Hooks。

useState Hooks

React useState 钩子允许我们跟踪函数组件中的状态。状态通常指应用程序中需要跟踪的数据或属性。

导入 useState

要使用 useState 钩子，我们首先需要将 import 它到我们的组件中。

import { useState } from 'react'

我们从 react 中解构 useState，因为它是一个命名导出。

初始化 useState

我们通过在函数组件中调用 useState 来初始化状态。

useState 接受初始状态并返回两个值：

  • 当前状态。
  • 更新状态的函数。
import { useState } from 'react'

function FavoriteColor() {
  const [color, setColor] = useState('')
}

第一个值 color 是我们当前的状态。第二个值 setColor 是用于更新状态的函数。这些名称是变量，可以任意命名。

最后，我们将初始状态设置为空字符串：useState('')

读取状态

我们现在可以在组件中的任何位置包含我们的状态。

import { useState } from 'react'
import ReactDOM from 'react-dom'

function FavoriteColor() {
  const [color, setColor] = useState('red')

  return 
我最喜欢的颜色是 {color}!

}

ReactDOM.render(, document.getElementById('root'))

更新状态

为了更新我们的状态，我们使用定义好的 setColor 状态更新程序函数。

import { useState } from 'react'
import ReactDOM from 'react-dom'

function FavoriteColor() {
  const [color, setColor] = useState('red')

  return (
    <>
      
我最喜欢的颜色是 {color}!

      
    
  )
}

ReactDOM.render(, document.getElementById('root'))

注意：我们不应该直接更新状态。例如：不允许使用 color="red"。

状态可以持有什么

useState 钩子可以用来跟踪字符串、数字、布尔值、数组、对象以及它们的任意组合！

我们可以创建多个状态 Hook 来跟踪单个值。

import { useState } from 'react'
import ReactDOM from 'react-dom'

function User() {
  const [name, setName] = useState('O.O')
  const [age, setAge] = useState(20)
  const [year, setYear] = useState(1998)

  return (
    <>
      
个人信息

      

        我叫{name}，今年{age}岁，生于{year}年。
      

    
  )
}

ReactDOM.render(, document.getElementById('root'))

或者，我们可以只使用一个状态并包含一个对象！

import { useState } from 'react'
import ReactDOM from 'react-dom'

function User() {
  const [user, setUser] = useState({
    name: 'O.O',
    age: 20,
    year: 1998
  })

  return (
    <>
      
个人信息

      

        我叫{user.name}，今年{user.age}岁，生于{user.year}年。
      

    
  )
}

ReactDOM.render(, document.getElementById('root'))

由于我们现在正在跟踪单个对象，因此在渲染组件时需要引用该对象，然后引用该对象的属性。（例如：user.name）

更新状态中的对象和数组

当状态更新时，整个状态都会被覆盖。

如果我们只想更新用户的年龄呢？

如果我们只调用 setUser({ age: 18 })，这将从我们的状态中删除 name 和 year。

我们可以使用 JavaScript 扩展运算符来帮助我们。

import { useState } from 'react'
import ReactDOM from 'react-dom'

function User() {
  const [user, setUser] = useState({
    name: 'O.O',
    age: 20,
    year: 1998
  })

  const updateUser = () => {
    setUser((previousState) => {
      return { ...previousState, age: 18 }
    })
  }

  return (
    <>
      
个人信息

      

        我叫{user.name}，今年{user.age}岁，生于{user.year}年。
      

      
    
  )
}

ReactDOM.render(, document.getElementById('root'))

因为我们需要状态的当前值，所以我们将一个函数传递给 setUser 函数。此函数接收上一个值。

然后我们返回一个对象，展开 previousState 并仅覆盖 age。

useEffect Hooks

useEffect Hook 允许您在组件中执行副作用。副作用的一些示例如：获取数据、直接更新 DOM 和定时器。

useEffect 接受两个参数。第二个参数是可选的。

以定时器为例，使用 setTimeout() 计算初始渲染后的 1 秒：

import { useState, useEffect } from 'react'
import ReactDOM from 'react-dom'

function Timer() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    setTimeout(() => {
      setCount((count) => count + 1)
    }, 1000)
  })

  return 
我已经渲染了 {count} 次！

}

ReactDOM.render(, document.getElementById('root'))

可是等等！！它一直在计数，即使它应该只计数一次！

useEffect 在每个渲染上运行。这意味着当计数发生变化时，会发生渲染，然后触发另一个效果。

这不是我们想要的。有几种方法可以控制副作用何时运行。

我们应该始终包含接受数组的第二个参数。我们可以选择将依赖项传递给该数组中的 useEffect。

没有任何依赖：

useEffect(() => {
  // 在每个渲染上运行
})

一个空数组：

useEffect(() => {
  // 仅在第一次渲染时运行
}, [])

prop 或 state 值：

useEffect(() => {
  // 在第一次渲染和任何依赖项值更改时运行
}, [prop, state])

所以，为了解决这个问题，让我们只在初始渲染上运行这个效果。

import { useState, useEffect } from 'react'
import ReactDOM from 'react-dom'

function Timer() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    setTimeout(() => {
      setCount((count) => count + 1)
    }, 1000)
  }, []) // <- 在此处添加空括号

  return 
我渲染了 {count} 次!

}

ReactDOM.render(, document.getElementById('root'))

下面是一个依赖于变量的 useEffect 钩子的示例。如果 count 变量更新，效果将再次运行：

import { useState, useEffect } from 'react'
import ReactDOM from 'react-dom'

function Counter() {
  const [count, setCount] = useState(0)
  const [calculation, setCalculation] = useState(0)

  useEffect(() => {
    setCalculation(() => count * 2)
  }, [count]) // <- 在这里添加 count 变量

  return (
    <>
      
总数: {count}

      
      
计算: {calculation}

    
  )
}

ReactDOM.render(, document.getElementById('root'))

如果存在多个依赖项，则应将它们包含在 useEffect 依赖项数组中。

清理 Effect

有些效果需要清理以减少内存泄漏。

超时、订阅、事件监听器和其他不再需要的效果应该被处理。

我们通过在 useEffect 钩子的末尾包含一个返回函数来实现这一点。

import { useState, useEffect } from 'react'
import ReactDOM from 'react-dom'

function Timer() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    let timer = setTimeout(() => {
      setCount((count) => count + 1)
    }, 1000)

    return () => clearTimeout(timer)
  }, [])

  return 
我渲染了 {count} 次!

}

ReactDOM.render(, document.getElementById('root'))

注意：要清除定时器，我们必须为其命名。

useContext Hooks

React Context 是一种全局管理状态的方法。

与单独使用 useState 相比，它可以与 useState 钩子一起使用，在深度嵌套的组件之间更容易地共享状态。

问题

状态应由堆栈中需要访问状态的最高父组件持有。

举例来说，我们有许多嵌套组件。堆栈顶部和底部的组件需要访问状态。

要在没有上下文的情况下实现这一点，我们需要将状态作为 props 传递给每个嵌套组件。这被称为 prop drilling。

import { useState } from 'react'
import ReactDOM from 'react-dom'

function Comp1() {
  const [user, setUser] = useState('O.O')

  return (
    <>
      
{`Hello ${user}!`}

      
    
  )
}

function Comp2({ user }) {
  return (
    <>
      
组件 2

      
    
  )
}

function Comp3({ user }) {
  return (
    <>
      
组件 3

      
    
  )
}

function Comp4({ user }) {
  return (
    <>
      
组件 4

      
    
  )
}

function Comp5({ user }) {
  return (
    <>
      
组件 5

      
{`Hello ${user} again!`}

    
  )
}

ReactDOM.render(, document.getElementById('root'))

即使组件 2-4 不需要状态，但它们也必须传递状态才能到达组件 5。

解决方案

解决方案是创建上下文。

要创建上下文，必须导入 createContext 并对其进行初始化：

import { useState, createContext } from 'react'
import ReactDOM from 'react-dom'

const UserContext = createContext()

接下来，我们将使用 Context Provider 来包装需要状态上下文的组件树。

Context Provider

在 Context Provider 中包装子组件并提供状态值。

function Comp1() {
  const [user, setUser] = useState('O.O')

  return (
    
      
{`Hello ${user}!`}

      
    
  )
}

现在，该树中的所有组件都可以访问用户上下文。

使用 useContext Hooks

为了在子组件中使用上下文，我们需要使用 useContext 钩子访问它。

首先，导入 useContext：

import { useState, createContext, useContext } from 'react'

然后，您可以访问所有组件中的用户上下文：

function Comp5() {
  const user = useContext(UserContext)

  return (
    <>
      
组件 5

      
{`Hello ${user} again!`}

    
  )
}

完整示例：

import { useState, createContext, useContext } from 'react'
import ReactDOM from 'react-dom'

const UserContext = createContext()

function Component1() {
  const [user, setUser] = useState('O.O')

  return (
    
      
{`Hello ${user}!`}

      
    
  )
}

function Comp2() {
  return (
    <>
      
组件 2

      
    
  )
}

function Comp3() {
  return (
    <>
      
组件 3

      
    
  )
}

function Comp4() {
  return (
    <>
      
组件 4

      
    
  )
}

function Comp5() {
  const user = useContext(UserContext)

  return (
    <>
      
组件 5

      
{`Hello ${user} again!`}

    
  )
}

ReactDOM.render(, document.getElementById('root'))

useRef Hooks

useRef 钩子允许在渲染之间持久化值。

它可用于存储在更新时不会导致重新渲染的可变值，也可用于直接访问 DOM 元素。

不会导致重新渲染

如果我们试图计算应用程序使用 useState 钩子渲染的次数，我们将陷入无限循环，因为这个钩子本身会导致重新渲染。

为了避免这种情况，我们可以使用 useRef 钩子。

import { useState, useEffect, useRef } from 'react'
import ReactDOM from 'react-dom'

function App() {
  const [inputValue, setInputValue] = useState('')
  const count = useRef(0)

  useEffect(() => {
    count.current = count.current + 1
  })

  return (
    <>
       setInputValue(e.target.value)}
      />
      
渲染次数: {count.current}

    
  )
}

ReactDOM.render(, document.getElementById('root'))

useRef() 只返回一项。它返回一个名为 current 的对象。

初始化 useRef 时，我们设置初始值为 useRef(0)。它其实类似于 const count= { current:0 }，我们可以使用 count 访问 count.current。

访问 DOM 元素

通常，我们希望让 React 处理所有 DOM 操作。

但在某些情况下，可以使用 useRef 而不会引起问题。

在 React 中，我们可以向元素添加 ref 属性，以便直接在 DOM 中访问它。

import { useRef } from 'react'
import ReactDOM from 'react-dom'

function App() {
  const inputElement = useRef()

  const focusInput = () => inputElement.current.focus()

  return (
    <>
      
      
    
  )
}

ReactDOM.render(, document.getElementById('root'))

跟踪状态变化

useRef 钩子还可用于跟踪先前的状态值。

这是因为我们能够在渲染之间持久化 useRef 值。

import { useState, useEffect, useRef } from 'react'
import ReactDOM from 'react-dom'

function App() {
  const [inputValue, setInputValue] = useState('')
  const previousInputValue = useRef('')

  useEffect(() => {
    previousInputValue.current = inputValue
  }, [inputValue])

  return (
    <>
       setInputValue(e.target.value)}
      />
      
当前值: {inputValue}

      
先前值: {previousInputValue.current}

    
  )
}

ReactDOM.render(, document.getElementById('root'))

这一次，我们结合使用 useState、useffect 和 useRef 来跟踪之前的状态。

在 useEffect 中，每次通过在 input 字段中输入文本来更新 inputValue 时，我们都会更新 useRef 当前值。

useReducer Hooks

useReducer 钩子类似于 useState 钩子。它允许自定义状态逻辑。

如果您发现自己在跟踪依赖于复杂逻辑的多个状态，useReducer 可能会很有用。

useReducer 钩子接受两个参数：

  • reducer函数包含自定义状态逻辑，initialState 可以是一个简单的值，但通常会包含一个对象。
  • useReducer 钩子返回当前 state 和 dispatch 方法。

下面是计数器使用 useReducer 的示例：

import { useReducer } from 'react'
import ReactDOM from 'react-dom'

const initialTodos = [
  {
    id: 1,
    title: 'Todo 1',
    complete: false
  },
  {
    id: 2,
    title: 'Todo 2',
    complete: false
  }
]

const reducer = (state, action) => {
  switch (action.type) {
    case 'COMPLETE':
      return state.map((todo) => {
        if (todo.id === action.id) {
          return { ...todo, complete: !todo.complete }
        } else {
          return todo
        }
      })
    default:
      return state
  }
}

function Todos() {
  const [todos, dispatch] = useReducer(reducer, initialTodos)

  const handleComplete = (todo) => {
    dispatch({ type: 'COMPLETE', id: todo.id })
  }

  return (
    <>
      {todos.map((todo) => (
        

          
        

      ))}
    
  )
}

ReactDOM.render(, document.getElementById('root'))

这就是跟踪 todo 完成状态的逻辑。

通过添加更多操作，添加、删除和完成 todo 的所有逻辑都可以包含在单个 useReducer 钩子中。

useCallback Hooks

React useCallback Hook 返回一个已记忆的回调函数。

这使我们能够隔离资源密集型函数，以便它们不会在每次渲染时自动运行。

useCallbackHook 仅在其依赖项之一更新时运行，提高了性能。

问题

使用 useCallback 的一个原因是防止组件重新渲染，除非其 props 已更改。

在本例中，您可能会认为 todos 组件不会重新渲染，除非 todos 发生更改：

// main.js
import { useState } from 'react'
import ReactDOM from 'react-dom'
import Todos from './Todos'

const App = () => {
  const [count, setCount] = useState(0)
  const [todos, setTodos] = useState([])

  const increment = () => {
    setCount((c) => c + 1)
  }
  const addTodo = () => {
    setTodos((t) => [...t, 'New Todo'])
  }

  return (
    <>
      
      

      

        次数: {count}
        
      

    
  )
}

ReactDOM.render(, document.getElementById('root'))

Todos.js 组件:

import { memo } from 'react'

const Todos = ({ todos, addTodo }) => {
  console.log('子渲染')
  return (
    <>
      
Todos List

      {todos.map((todo, index) => {
        return 
{todo}

      })}
      
    
  )
}

export default memo(Todos)

尝试运行它并单击 + 按钮。

您会注意到，即使 todos 没有更改，Todos 组件也会重新渲染。

为什么这不起作用？我们使用的是 memo，所以 Todos 组件不应该重新渲染，因为当 count增加时，todos 状态和 addTodo 函数都没有改变。

这是因为所谓的“参照平等”。

每次组件重新渲染时，都会重新创建其函数。因此，addTodo 函数实际上发生了变化。

解决方案

为了解决这个问题，我们可以使用 useCallback 钩子来防止函数被重新创建，除非有必要。

使用 useCallback 钩子可以防止 Todos 组件不必要地重新渲染：

import { useState, useCallback } from 'react'
import ReactDOM from 'react-dom'
import Todos from './Todos'

const App = () => {
  const [count, setCount] = useState(0)
  const [todos, setTodos] = useState([])

  const increment = () => {
    setCount((c) => c + 1)
  }
  const addTodo = useCallback(() => {
    setTodos((t) => [...t, 'New Todo'])
  }, [todos])

  return (
    <>
      
      

      

        次数: {count}
        
      

    
  )
}

ReactDOM.render(, document.getElementById('root'))

Todos.js 组件:

import { memo } from 'react'

const Todos = ({ todos, addTodo }) => {
  console.log('子渲染')
  return (
    <>
      
Todos List

      {todos.map((todo, index) => {
        return 
{todo}

      })}
      
    
  )
}

export default memo(Todos)

useMemo Hooks

React useMemo 钩子返回一个已记忆的值，它仅在其中一个依赖项更新时运行，提高性能。

useMemo 和 useCallback 钩子类似。主要区别在于 useMemo 返回一个已记忆的值， useCallback 返回一个已记忆的函数。

性能

useMemo 钩子可以用来防止昂贵的、资源密集型的函数不必要地运行。

在本例中，我们有一个在每个渲染上运行的昂贵函数。

更改计数或添加 todo 时，您会注意到执行延迟。

import { useState } from 'react'
import ReactDOM from 'react-dom'

const App = () => {
  const [count, setCount] = useState(0)
  const [todos, setTodos] = useState([])
  const calculation = expensiveCalculation(count)

  const increment = () => {
    setCount((c) => c + 1)
  }
  const addTodo = () => {
    setTodos((t) => [...t, 'New Todo'])
  }

  return (
    

      

        
Todos List

        {todos.map((todo, index) => {
          return 
{todo}

        })}
        
      

      

      

        Count: {count}
        
        
昂贵的计算

        {calculation}
      

    

  )
}

const expensiveCalculation = (num) => {
  console.log('计算...')
  for (let i = 0; i < 1000000000; i++) {
    num += 1
  }
  return num
}

ReactDOM.render(, document.getElementById('root'))

使用 useMemo

为了解决这个性能问题，我们可以使用 useMemoHook 来记忆 expensiveCalculation 函数。这将导致该函数仅在需要时运行。

useMemoHook 接受第二个参数来声明依赖项。昂贵的函数只会在其依赖关系发生变化时运行。

在下面的示例中，昂贵的函数只会在 count 更改时运行，而不是在添加待办事项时运行。

import { useState, useMemo } from 'react'
import ReactDOM from 'react-dom'

const App = () => {
  const [count, setCount] = useState(0)
  const [todos, setTodos] = useState([])
  const calculation = useMemo(() => expensiveCalculation(count), [count])

  const increment = () => {
    setCount((c) => c + 1)
  }
  const addTodo = () => {
    setTodos((t) => [...t, 'New Todo'])
  }

  return (
    

      

        
Todos List

        {todos.map((todo, index) => {
          return 
{todo}

        })}
        
      

      

      

        Count: {count}
        
        
昂贵的计算

        {calculation}
      

    

  )
}

const expensiveCalculation = (num) => {
  console.log('计算...')
  for (let i = 0; i < 1000000000; i++) {
    num += 1
  }
  return num
}

ReactDOM.render(, document.getElementById('root'))

自定义 Hooks

Hooks 是可重用的函数。

当您有需要在多个组件中使用相同的组件逻辑时，我们可以将该逻辑提取到自定义 Hook。

自定义 Hooks 以 use 开头。本节将编写一个 useFetch 示例。

自定义 useFetch 钩子

在下面的代码中，我们在 Home 组件中获取数据并显示它。

我们将使用 JSONPlaceholder 服务来获取假数据。

使用 JSONPlaceholder 服务获取假 Todos 列表，并在页面上显示标题：

import { useState, useEffect } from 'react'
import ReactDOM from 'react-dom'

const Home = () => {
  const [data, setData] = useState(null)

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/todos')
      .then((res) => res.json())
      .then((data) => setData(data))
  }, [])

  return (
    <>
      {data &&
        data.map((item) => {
          return 
{item.title}

        })}
    
  )
}

ReactDOM.render(, document.getElementById('root'))

其他组件也可能需要获取逻辑，因此我们将其提取到自定义 Hook 中。

将获取逻辑移动到一个新文件以用作自定义 Hook：

// useFetch.js
import { useState, useEffect } from 'react'

const useFetch = (url) => {
  const [data, setData] = useState(null)

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((data) => setData(data))
  }, [url])

  return [data]
}

export default useFetch

// main.js
import ReactDOM from 'react-dom'
import useFetch from './useFetch'

const Home = () => {
  const [data] = useFetch('https://jsonplaceholder.typicode.com/todos')

  return (
    <>
      {data &&
        data.map((item) => {
          return 
{item.title}

        })}
    
  )
}

ReactDOM.render(, document.getElementById('root'))

我们创建了一个名为 useFetch.js 的新文件，其中包含一个名为 useFetch 的函数，该函数包含获取数据所需的所有逻辑。

我们删除了硬编码的 URL，并将其替换为可以传递给自定义钩子的 URL 变量。

最后，我们从钩子中返回数据。

在 main.js 中，我们导入 useFetch 钩子，并像其他钩子一样使用它。这就是我们传递 URL 以从中获取数据的地方。

现在我们可以在任何组件中重用这个自定义钩子，从任何 URL 获取数据。

你可能感兴趣的:(React Hooks)

  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • react-intl——react国际化使用方案 苹果酱0567 面试题汇总与解析java开发语言中间件springboot后端
    国际化介绍i18n：internationalization国家化简称，首字母+首尾字母间隔的字母个数+尾字母，类似的还有k8s(Kubernetes)React-intl是React中最受欢迎的库。使用步骤安装#usenpmnpminstallreact-intl-D#useyarn项目入口文件配置//index.tsximportReactfrom"react";importReactDOMf
  • 字节二面 Redstone Monstrosity 前端面试
    1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
  • 前端代码上传文件 余生逆风飞翔 前端javascript开发语言
    点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
  • 前端使用react-intl-universal进行国际化 Stephy_Yy #调研reactjsjavascriptcss
    一、国际化/i18n目前国际化，就是开发者写对象，一个key关联若干语种的翻译。相比于浏览器自带的翻译功能，语义更加准确。“国际化”的简称：i18n（其来源是英文单词internationalization的首末字符i和n，18为中间的字符数）二、react项目国际化react-intl是业界最受欢迎的软件包之一：React-intl是雅虎的语言国际化开源项目FormatJS的一部分，通过其提供的
  • VUE实现大小缩放轮播图 书边事. vue.js前端javascript
    效果图import{ref,computed,reactive,watch,onMounted}from'vue';exportdefault{props:{/***轮播数据来源*/source:{type:Array,default:()=>[{img:require('@/assets/imgs/test/1.png')},{img:require('@/assets/imgs/test/1.
  • react里的index.js是怎么跟index.html结合起来的? SherrinfordL
    image.pngcreate-react-app把webpack、babel等配置都封装到了依赖项目react-script中，所以你无法直观的看到这些配置。你可以在项目下运行npmruneject，被隐藏的配置文件就会暴露到项目根路径下。把请求转发到index.html原因是，你执行npmrunstart时，启动的webpack-dev-server，会加载react-script项目conf
  • Taro实现微信小程序自定义拍照截图识别 书边事. taro微信小程序小程序
    效果图：代码：>请对准框内拍摄题目重新拍照文件处理中...开始识别definePageConfig({navigationStyle:"custom",navigationBarTitleText:"",//启用页面分享//enableShareAppMessage:true,//启动朋友圈分享//enableShareTimeline:true});import{reactive,toRefs,
  • （小白入门）Windows环境下搭建React Native Android开发环境 码农老黑 前端ReactNative移动开发Androidstudio
    ReactNative(简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的UI框架React在原生移动应用平台的衍生产物，目前支持iOS和Android两大平台。RN的环境搭建在RN的中文社区有所介绍，但是对于小白来说还是有些太过简略了。RN中文社区详见参考，本文不涉及的问题也许在其中能够有所解答。ReactNative思想底层引擎是JavaSc
  • react中如何获取并使用usestate声明的变量的值 小华0000 react.jsjavascript前端
    1.函数式更新当需要根据当前状态来更新状态时，可以使用函数式更新。setState（在类组件中）和setCount（在useState中）都可以接受一个函数作为参数，这个函数接收当前的状态作为参数，并返回新的状态。functionExampleComponent(){const[count,setCount]=useState(0);//使用函数式更新functionhandleClick(){s
  • 【Vue3源码实现】Ref isRef unRef proxyRefs实现 ZhaiMou vue.jsjavascript前端数据结构前端框架开发语言
    前言在上篇文章中我们了解了响应式原理，并在最后实现了reactive。上文链接Vue3响应式原理实现与track和trigger依赖收集和触发依赖在我们的日常业务中，我们有可能需要将一个基础数据类型的值也转换成响应式的，而reactive只能代理对象，我们需要对基础数据类型的值也进行读写操作的拦截，但Proxy无法实现对基础数据类型值读写操作的拦截。所以Vue设计了Ref,以及相关api本篇文章实
  • React 前端应用结合 Nginx 部署指南及常见错误排查 蜗牛去旅行吧 前端react.jsnginx
    在现代Web开发中，React已成为构建用户界面的流行选择，而Nginx则是一个高性能的Web服务器，广泛用于静态文件的托管和负载均衡。在本篇博客中，我们将详细介绍如何将一个React应用部署到Nginx上，并探讨在部署过程中可能遇到的常见错误及其解决方案。部署步骤1.准备React应用首先，确保你已经创建了一个React应用。如果还没有，可以使用CreateReactApp快速生成一个基础项目：
  • vue3 响应性API weixin_44747590 vue3vuejs
    toRef可以用来为源响应式对象上的property性创建一个ref。然后可以将ref传递出去，从而保持对其源property的响应式连接。本质类似指针引用。举例：conststate=reactive({foo:1,bar:2})constfooRef=toRef(state,'foo')fooRef.value++console.log(state.foo)//2state.foo++cons
  • 手撸vue3核心源码——响应式原理(isRef和unRef) 前端不是渣男 前端vue.js
    今天来实现一下ref的功能函数，isRef与unRefisRefisRef和isReactive一样，都是用于检测数据类型，isRef是检测是不是一个ref对象,跟isReactive函数实现起来一样,我们先来写一个单元测试这里要实现的功能是，检测ref对象肯定就通过返回true，检测普通类型数据以及reactive对象都是falseit("itshouldreturnaboolean",()=>
  • vue3 | isRef、unref、toRef、toRefs 杨贵妃会飞飞飞 Vuevue.js前端
    isRef检查某个值是否是ref。是返回true，否则返回false。constnum=ref(10)constnum1=20constnum2=reactive({data:30})console.log(isRef(num))//trueconsole.log(isRef(num1))//falseconsole.log(isRef(num2))//falseunref()如果参数是ref，则
  • vue学习笔记——关于对Vue3 ref(), toRef(), toRefs(), unref(), isRef(), reactive()方法的理解。 chen_sir_sh vue学习笔记javascript前端vue
    VUE3出现了很多新的API，下面是自己的一些理解进行的总结。欢迎大家一起交流补充。ref()使用ref创建一个数据类型，ref有value这个属性constname1={age:"14",name:"bob1"};constname2=ref({name:"bob2"});//使用ref创建一个数据类型相对于reactive，ref有value属性name2.value="bob3"consol
  • React项目的开发前准备 以及 JSX 的基本使用 渡鸦七 Reactreact.js前端前端框架
    React项目的开发前准备以及JSX的基本使用React项目创建create-react-appnpxcreate-react-appmy-appcdmy-appnpmstartyarncreatereact-appyarncreatereact-appmy-appcdmy-appyarnstartcreate-react-app和yarncreatereact-app都可以快速创建一个React
  • react 函数组件useState异步变同步 MIKE-zi react入门setstate异步问题函数组件实现分页函数组件上拉加载
    需求函数组件实现一个下拉上拉的列表，列表支持分页。最开始我们使用setstate的方式去报错当前页数。这样做的问题，就是有一个异步的延迟。上代码const[pageNo,setpageNo]=useState(1)constonPullUpRefresh=()=>{console.log("上拉加载内容")console.log("上一次的pageNo",pageNo)setpageNo(page
  • tapable详解 风火一回 webpacktapablewebpack插件制作
    tapable详解tapable是webpack内部使用的一个流程管理工具，主要用来串联插件，完善事件流执行。1.安装tapableyarnaddtapable2.常用hooksimport{SyncHook,SyncBailHook,SyncWaterfallHook,SyncLoopHook,AsyncParallelHook,AsyncParallelBailHook,AsyncSeries
  • Netty权威指南：Netty总结-高性能与可靠性 Ty_1106 Nettyjava网络rpc
    第二十二章高性能之道22.1RPC调用性能模型分析22.1.1传统RPC调用性能差三宗罪：网络传输采用同步阻塞I/O导致经常性阻塞序列化性能差线程模型问题22.1.2I/O通信性能三要素传输：BIO、NIO或者AIO协议：HTTP公有协议，内部私有协议线程：数据报如何读取，Reactor线程模型22.2Netty高性能之道22.2.1异步非阻塞通信I/O多路复用技术22.2.2高效的Reactor
  • Vue 和 React 的对比 淘淘是只狗 vueReactvue.jsreact.jsjavascript
    React和Vue有许多相似之处：使用VirtualDOM提供了响应式(Reactive)和组件化(Composable)的视图组件。将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。运行时性能React在React应用中，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件子树。如要避免不必要的子组件的重渲染，你需要在所有可能的地方使用PureComponent，
  • 一文让你彻底弄懂Redux的基本原理以及其如何在React中使用！ tabzzz react.jsjavascriptecmascript
    文章目录什么是Redux？它有什么用Redux基本原理Redux在React中具体使用的方法ReduxToolkit（RTK）createSlice函数参数返回值示例configureStore函数参数返回值示例React-ReduxProvider组件示例React组件使用store中的数据useSelector钩子函数示例connect组件mapStateToPropsmapDispatchT
  • react 更新元素状态 叶绿素yls
    所有的react元素都是immutable不可变的。当元素被创建之后，我们无法修改他的内容或属性。根据我们现在所学的react的知识，我们要更新元素的内容，我们必须重新渲染这个元素，也就是重新创建这个元素。看一个例子：functiontick(){constelement=Hello,worldItis{newDate().toLocaleString()}.;ReactDOM.render(el
  • Reactive 编程-Vert.x Flying_Fish_Xuan python开发语言
    Reactive编程与Vert.x：高效异步Java微服务框架一、什么是Reactive编程？Reactive编程是一种异步编程范式，专注于数据流和事件的传播处理。与传统的阻塞式编程不同，Reactive编程能够更好地处理高并发和异步操作，特别适合实时系统、流处理以及需要快速响应的场景。Reactive编程的核心原则包括：响应性（Responsive）：系统能够快速响应用户请求，并保持低延迟。弹性
  • 生成一个完整的App代码通常不会仅仅通过单一的文件或几种语言的简单组合来完成，因为App的开发涉及前端用户界面、后端逻辑处理、数据库管理以及可能的第三方服务集成等多个方面。不过，我可以为你提供一个概念 NewmanEdwarda2 前端ui数据库
    前端(用户界面)yinanjinying.comHTML/CSS/JavaScript(原生Web开发)对于简单的WebApp，你可以直接使用HTML来构建页面结构，CSS来设置样式，JavaScript来添加交互性。React(JavaScript/TypeScript)对于更复杂的单页应用（SPA），React是一个流行的选择。它允许你构建可复用的UI组件。Flutter(Dart)如果你想要
  • react native ScrollView实现滑动锚定，滑动到指定位置 君君yui 前端reactnativereact.jsjavascript
    实现ScrollView滑动视图组件滑动到指定位置，实现tab与具体位置相锚定给需要锚定的组件加上onLayout属性//event.nativeEvent.layout.x是水平方向值，event.nativeEvent.layout.y是数值方向值//this.layoutList用于存储组件位置onLayout={(event)=>{this.layoutList.push(event.na
  • reactnative 获取定位_React-native实现定位的功能 weixin_39644915 reactnative获取定位
    1、在React-native中实现定位的功能的几种方式。(1).使用rn中的自带的Geolocation实现定位。(2).用第三放库react-native-location实现定位。2.用rn中自带的Geolocation实现定位的详细步骤：(1).如果是android进行定位手下是需要权限的通过以下代码设置权限：(2).直接通过navigator.geolocation来进行定位，示例代码如
  • React Native动画的锚点anchorPoint 沉默的依恋 ReactNative
    在RN动画开发的过程中,有需求让图片绕中心点以外的其它点旋转,本以为是一个简单的问题,猜想Facebook应该有提供类似的API.然而在官网找了一圈没有anchorPoint这个API,后来想了想,RN与H5非常像,应该有transformOrigin这个属性,然而,还是没有,在github的issues中有人提问过什么时候更新这个属性,但是官网仍旧没有计划;为了达到这种效果,其实有一种间接的方法
  • 基于react native的锚点 miao_zz Reactreact-nativereactnativeandroidreact.js
    基于reactnative的锚点效果示例图示例代码效果示例图示例代码/*eslint-disablereact-native/no-inline-styles*/importReact,{useEffect,useRef,useState}from'react';import{Image,ImageBackground,ScrollView,StyleSheet,Text,TouchableOpa
  • vue2与vue3的区别 longfan_ vue
    1.vue2和vue3响应式原理发生了改变vue2的响应式原理是利⽤es5的⼀个API，Object.defineProperty()对数据进⾏劫持结合发布订阅模式的⽅式来实现的。vue3中使⽤了es6的proxyAPI对数据代理，通过reactive()函数给每⼀个对象都包⼀层Proxy，通过Proxy监听属性的变化，从⽽实现对数据的监控。这⾥是引相⽐于vue2版本，使⽤proxy的优势如下1.
  • LeetCode[Math] - #66 Plus One Cwind javaLeetCode题解AlgorithmMath
    原题链接：#66 Plus One   要求： 给定一个用数字数组表示的非负整数，如num1 = {1, 2, 3, 9}, num2 = {9, 9}等，给这个数加上1。 注意： 1. 数字的较高位存在数组的头上，即num1表示数字1239 2. 每一位（数组中的每个元素）的取值范围为0~9   难度：简单   分析： 题目比较简单，只须从数组
  • JQuery中$.ajax()方法参数详解 AILIKES JavaScriptjsonpjqueryAjaxjson
    url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。 type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和    delete也可以使用，但仅部分浏览器支持。 timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局
  • JConsole & JVisualVM远程监视Webphere服务器JVM Kai_Ge JVisualVMJConsoleWebphere
        JConsole是JDK里自带的一个工具，可以监测Java程序运行时所有对象的申请、释放等动作，将内存管理的所有信息进行统计、分析、可视化。我们可以根据这些信息判断程序是否有内存泄漏问题。 　　使用JConsole工具来分析WAS的JVM问题，需要进行相关的配置。 　　首先我们看WAS服务器端的配置. 　　1、登录was控制台https://10.4.119.18
  • 自定义annotation 120153216 annotation
    Java annotation 自定义注释@interface的用法 一、什么是注释      说起注释，得先提一提什么是元数据(metadata)。所谓元数据就是数据的数据。也就是说，元数据是描述数据的。就象数据表中的字段一样，每个字段描述了这个字段下的数据的含义。而J2SE5.0中提供的注释就是java源代码的元数据，也就是说注释是描述java源
  • CentOS 5/6.X 使用 EPEL YUM源 2002wmj centos
    CentOS 6.X 安装使用EPEL YUM源1. 查看操作系统版本[root@node1 ~]# uname -a Linux node1.test.com 2.6.32-358.el6.x86_64 #1 SMP Fri Feb 22 00:31:26 UTC 2013 x86_64 x86_64 x86_64 GNU/Linux [root@node1 ~]#
  • 在SQLSERVER中查找缺失和无用的索引SQL 357029540 SQL Server
    --缺失的索引 SELECT  avg_total_user_cost * avg_user_impact * ( user_scans + user_seeks ) AS PossibleImprovement ,          last_user_seek ,    
  • Spring3 MVC 笔记（二） —json+rest优化 7454103 Spring3 MVC
    接上次的 spring mvc 注解的一些详细信息！                          其实也是一些个人的学习笔记  呵呵！
  • 替换“\”的时候报错Unexpected internal error near index 1 \ ^ adminjun java“\替换”
    发现还是有些东西没有刻子脑子里,,过段时间就没什么概念了,所以贴出来...以免再忘...   在拆分字符串时遇到通过 \ 来拆分，可是用所以想通过转义 \\ 来拆分的时候会报异常   public class Main {          /*
  • POJ 1035 Spell checker(哈希表) aijuans 暴力求解--哈希表
    /* 题意：输入字典，然后输入单词，判断字典中是否出现过该单词，或者是否进行删除、添加、替换操作，如果是，则输出对应的字典中的单词 要求按照输入时候的排名输出 题解：建立两个哈希表。一个存储字典和输入字典中单词的排名，一个进行最后输出的判重 */ #include <iostream> //#define using namespace std; const int HASH =
  • 通过原型实现javascript Array的去重、最大值和最小值 ayaoxinchao JavaScriptarrayprototype
    用原型函数（prototype）可以定义一些很方便的自定义函数，实现各种自定义功能。本次主要是实现了Array的去重、获取最大值和最小值。 实现代码如下：   <script type="text/javascript"> Array.prototype.unique = function() { var a = {}; var le
  • UIWebView实现https双向认证请求 bewithme UIWebViewhttpsObjective-C
              什么是HTTPS双向认证我已在先前的博文 ASIHTTPRequest实现https双向认证请求 中有讲述，不理解的读者可以先复习一下。本文是用UIWebView来实现对需要客户端证书验证的服务请求，网上有些文章中有涉及到此内容，但都只言片语，没有讲完全，更没有完整的代码，让人困扰不已。但是此知
  • NoSQL数据库之Redis数据库管理(Redis高级应用之事务处理、持久化操作、pub_sub、虚拟内存) bijian1013 redis数据库NoSQL
    3.事务处理         Redis对事务的支持目前不比较简单。Redis只能保证一个client发起的事务中的命令可以连续的执行，而中间不会插入其他client的命令。当一个client在一个连接中发出multi命令时，这个连接会进入一个事务上下文，该连接后续的命令不会立即执行，而是先放到一个队列中，当执行exec命令时，redis会顺序的执行队列中
  • 各数据库分页sql备忘 bingyingao oraclesql分页
    ORACLE 下面这个效率很低 SELECT * FROM ( SELECT A.*, ROWNUM RN FROM (SELECT * FROM IPAY_RCD_FS_RETURN order by id desc) A ) WHERE RN <20; 下面这个效率很高 SELECT A.*, ROWNUM RN FROM (SELECT * FROM IPAY_RCD_
  • 【Scala七】Scala核心一：函数 bit1129 scala
    1. 如果函数体只有一行代码，则可以不用写{},比如 def print(x: Int) = println(x) 一行上的多条语句用分号隔开，则只有第一句属于方法体，例如   def printWithValue(x: Int) : String= println(x); "ABC"   上面的代码报错，因为，printWithValue的方法
  • 了解GHC的factorial编译过程 bookjovi haskell
    GHC相对其他主流语言的编译器或解释器还是比较复杂的，一部分原因是haskell本身的设计就不易于实现compiler，如lazy特性，static typed，类型推导等。 关于GHC的内部实现有篇文章说的挺好，这里，文中在RTS一节中详细说了haskell的concurrent实现，里面提到了green thread，如果熟悉Go语言的话就会发现，ghc的concurrent实现和Go有点类
  • Java-Collections Framework学习与总结-LinkedHashMap BrokenDreams LinkedHashMap
            前面总结了java.util.HashMap，了解了其内部由散列表实现，每个桶内是一个单向链表。那有没有双向链表的实现呢？双向链表的实现会具备什么特性呢？来看一下HashMap的一个子类——java.util.LinkedHashMap。       
  • 读《研磨设计模式》-代码笔记-抽象工厂模式-Abstract Factory bylijinnan abstract
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ package design.pattern; /* * Abstract Factory Pattern * 抽象工厂模式的目的是： * 通过在抽象工厂里面定义一组产品接口，方便地切换“产品簇” * 这些接口是相关或者相依赖的
  • 压暗面部高光 cherishLC PS
    方法一、压暗高光&重新着色 当皮肤很油又使用闪光灯时，很容易在面部形成高光区域。 下面讲一下我今天处理高光区域的心得： 皮肤可以分为纹理和色彩两个属性。其中纹理主要由亮度通道（Lab模式的L通道）决定，色彩则由a、b通道确定。 处理思路为在保持高光区域纹理的情况下，对高光区域着色。具体步骤为：降低高光区域的整体的亮度，再进行着色。 如果想简化步骤，可以只进行着色（参看下面的步骤1
  • Java VisualVM监控远程JVM crabdave visualvm
    Java VisualVM监控远程JVM    JDK1.6开始自带的VisualVM就是不错的监控工具. 这个工具就在JAVA_HOME\bin\目录下的jvisualvm.exe, 双击这个文件就能看到界面   通过JMX连接远程机器, 需要经过下面的配置: 1. 修改远程机器JDK配置文件 (我这里远程机器是linux).    
  • Saiku去掉登录模块 daizj saiku登录olapBI
    1、修改applicationContext-saiku-webapp.xml <security:intercept-url pattern="/rest/**" access="IS_AUTHENTICATED_ANONYMOUSLY" />  <security:intercept-url pattern=&qu
  • 浅析 Flex中的Focus dsjt htmlFlexFlash
    关键字：focus、 setFocus、 IFocusManager、KeyboardEvent 焦点、设置焦点、获得焦点、键盘事件 一、无焦点的困扰——组件监听不到键盘事件 原因：只有获得焦点的组件（确切说是InteractiveObject）才能监听到键盘事件的目标阶段；键盘事件（flash.events.KeyboardEvent）参与冒泡阶段，所以焦点组件的父项（以及它爸
  • Yii全局函数使用 dcj3sjt126com yii
    由于YII致力于完美的整合第三方库，它并没有定义任何全局函数。yii中的每一个应用都需要全类别和对象范围。例如，Yii::app()->user;Yii::app()->params['name'];等等。我们可以自行设定全局函数，使得代码看起来更加简洁易用。(原文地址) 我们可以保存在globals.php在protected目录下。然后，在入口脚本index.php的，我们包括在
  • 设计模式之单例模式二（解决无序写入的问题） come_for_dream 单例模式volatile乱序执行双重检验锁
                    在上篇文章中我们使用了双重检验锁的方式避免懒汉式单例模式下由于多线程造成的实例被多次创建的问题，但是因为由于JVM为了使得处理器内部的运算单元能充分利用，处理器可能会对输入代码进行乱序执行（Out Of Order Execute）优化，处理器会在计算之后将乱序执行的结果进行重组，保证该
  • 程序员从初级到高级的蜕变 gcq511120594 框架工作PHPandroidhtml5
    软件开发是一个奇怪的行业，市场远远供不应求。这是一个已经存在多年的问题，而且随着时间的流逝，愈演愈烈。 我们严重缺乏能够满足需求的人才。这个行业相当年轻。大多数软件项目是失败的。几乎所有的项目都会超出预算。我们解决问题的最佳指导方针可以归结为——“用一些通用方法去解决问题，当然这些方法常常不管用，于是，唯一能做的就是不断地尝试，逐个看看是否奏效”。 现在我们把淫浸代码时间超过3年的开发人员称为
  • Reverse Linked List hcx2013 list
    Reverse a singly linked list.   /** * Definition for singly-linked list. * public class ListNode { * int val; * ListNode next; * ListNode(int x) { val = x; } * } */ p
  • Spring4.1新特性——数据库集成测试 jinnianshilongnian spring 4.1
    目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T
  • C# Ajax上传图片同时生成微缩图(附Demo) liyonghui160com
        1.Ajax无刷新上传图片,详情请阅我的这篇文章。（jquery + c# ashx）         2.C#位图处理  System.Drawing。         3.最新demo支持IE7,IE8,Fir
  • Java list三种遍历方法性能比较 pda158 java
    从c/c++语言转向java开发，学习java语言list遍历的三种方法，顺便测试各种遍历方法的性能，测试方法为在ArrayList中插入1千万条记录，然后遍历ArrayList，发现了一个奇怪的现象，测试代码例如以下： package com.hisense.tiger.list; import java.util.ArrayList; import java.util.Iterator;
  • 300个涵盖IT各方面的免费资源（上）——商业与市场篇 shoothao seo商业与市场IT资源免费资源
    A.网站模板+logo+服务器主机+发票生成 HTML5 UP:响应式的HTML5和CSS3网站模板。 Bootswatch:免费的Bootstrap主题。 Templated:收集了845个免费的CSS和HTML5网站模板。 Wordpress.org|Wordpress.com:可免费创建你的新网站。 Strikingly:关注领域中免费无限的移动优
  • localStorage、sessionStorage uule localStorage
    W3School 例子   HTML5 提供了两种在客户端存储数据的新方法： localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储   之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他