回应的备忘录
React 是什么
有以下3个特点。
-
- Declarative(宣言的)
-
- Component-Base(コンポーネントベース)
- Learn Once, Write Anywhere(一度の学びでなんでも書ける)
JSX（JavaScript XML）是一种在 JavaScript 中编写可嵌入 HTML 结构的语法。
TSX是对JavaScript的扩展语法，类似于JavaScript的JSX。TSX允许我们在TypeScript中编写HTML代码。
如果我们想要在TSX中使用JavaScript语法，可以使用花括号{}来包围它。
在中文中，”コンポーネント”可以翻译为”组件”。
隨著Hooks的出現，使用函數組件變得普遍，原本React中存在函數組件和類組件。
上下文是
React Hooks 反应钩子
只有在React函数内部调用Hook。
使用状态
useState是用于管理组件状态的Hook。
const [状態を表す変数,状態を変化させる関数名] = useState(状態の初期値)
const [count, setCount] = useState(0)
// countの値を更新
setCount(count+1)
// またはこっち
setCount((preCount)=>preCount+1)
如果在useState中处理对象或数组的情况下，需要使用展开语法（{…}）将其展开并添加更改的部分进行描述。
在useState的情况下，传递给更新函数的值不是与现有状态合并，而是替换为一个新的状态，因此需要展开原始对象或数组以保留先前的状态。
const [obj, setObj] = useState({})
// 値の更新
setObj({...obj,追加する値})
const [arr, setArr] = useState([])
// 値の更新
setArr([...arr,追加する値])
使用useReducer
useReducer是一个用于管理组件状态的Hook，类似于useState。实际上，useState在内部是基于useReducer实现的。
const [state, dispatch] = useReducer(reducer,初期値)
state表示一个状态变量，state的更新函数是reducer。
dispatch是调用reducer的函数。
dispatch(action)
通过将对象行动（action）作为参数传递给调度（dispatch）来调用reducer函数，以触发更新功能。
const reducer = (state, action) => {
// actionに応じた処理内容
return 次のstateの値
}
传递给reducer的参数包括表示组件状态的state和通过dispatch传递的action对象。
可以使用switch语句等来编写针对action中指定属性的处理。
useState和useReducer的差别在于用法的选择。
useState和useReducer在更新状态方面具有相似的作用。在以下条件下，使用它们能够提高可读性。
useContext()と併用する
使用useEffect
可以指定在DOM更新后要调用的处理程序的Hook。
useEffect(()={
//処理内容
},[状態変化を監視するステート名])
如果在初次渲染时和指定的状态存在的话，每次更新该状态时都会执行。
// ステートの設定
const [count, setCount] = useState(0)
const [value, setValue] = useState('')
// ページタイトルを変更
useEffect(()={
document.title = `{count}`
})
在這種情況下，由於未指定狀態，useEffect將在以下情況下執行。
-
- 初回render時
countが更新された時
valueが更新された時
只需在count更新时触发useEffect即可，处理内容方面不会有问题，因此可以使用指定的状态来减少触发次数。
const [count, setCount] = useState(0)
const [value, setValue] = useState('')
// ページタイトルを変更
useEffect(()={
document.title = `{count}`
},[count])
通过在useEffect的第二个参数数组中指定要监视的状态，只有当该状态更新时才会触发，否则会被忽略。
在这种情况下，useEffect将在以下情况下执行。
-
- 初回render時
countが更新された時
通过这种方式，当值被更新时，可以忽略触发。
如果将第二个参数指定为空数组（[]），则可以使处理仅在首次渲染时执行。
const [count, setCount] = useState(0)
const [value, setValue] = useState('')
// ページタイトルを変更
useEffect(()={
document.title = `{count}`
},[])
在这种情况下，只有在第一次渲染时才会被触发，因此页面标题将保持为0。
可以通过在useEffect中设置return来指定在组件从DOM中被删除（卸载）时要执行的操作函数。
useEffect(()={
// マウスが動いた時の処理を追加
window.addEventListener('mousemove',実行される関数)
return () => {
// アンマウント時に実行される処理
// 登録した処理を削除
window.removeEventListener('mousemove',実行される関数)
}
})
易于理解的文章
使用上下文
一种可以不通过父组件进行数据传递而直接操作组件的 Hook。
书写方法如下。
import {createContext} from 'react'
import {ComponentC} from './component/ComponentC'
export const UserContext = createContext()
export function App() {
const [user, setUser] = useState({name:'yamada',age:32})
return (
<div className="App">
<UserContext.Provider value={user}>
<ComponentC />
</UserContext.Provider>
</div>
);
}
将要传递的组件创建在Context的Provider中，即UserContext.Provider。
同时，将要传递的变量作为value传递。
为了在其他文件中使用该Context，需要进行导出。
import React, { useContext } from 'react'
import {UserContext} from '../App'
export function ComponentF(){
const user = useContext(UserContext)
return (
<div>
{user.name}
</div>
)
}
假设ComponentF包含在ComponentC中。
可以使用useContext接收传递的Context并将其存储在变量中。
之后可以在该范围内使用变量来访问值。
使用useRef
执行对要素的引用的钩子。
const ref = useRef(初期値)
在使用 useRef 时，需要在组件的顶层调用并声明变量。
它返回一个具有初始值的对象，该对象具有一个 current 属性。
主要用于引用值或进行 DOM 操作。
当需要引用一个数值时
可以使用useRef来定义要参照的值，并通过指定current属性进行重新赋值来更新值，从而保持渲染不变。
// 参照したい値の定義
const count = useRef(0)
// 値の更新
count.current = 1
进行DOM操作
将定义在JSX中的ref对象传递给想要操作的DOM节点。
传递的DOM节点将被存储在current属性中，因此可以使用current属性来进行常规的DOM操作。
// useRefの定義
const inputDom = useRef(null)
// DOMの指定（JSX内）
return <input ref={inputDom} />
// DOMの操作（入力欄にフォーカスする）
inputDom.current.focus()
