学习React/React Hooks的基础-React基础的学习笔记2

3 年 ago
逸, 科
1 minute

React基礎的意思是指React框架的基本知識或基礎概念。

JSX是一种用于构建React应用程序的JavaScript语法扩展。

    • 最上位に1つの要素を配置する

または <></> を最上位にすれば余計なタグが入らない。

class → className、 for → htmlFor に置き換える。
直接style属性は使えない

のように書く。

外側の{}はReactの記法、内側の{}はJavaScriptのオブジェクト定義。

defaultValue属性、defaultChecked属性

stateで更新されない非制御コンポーネントで、value属性でフォームの初期値を設定してしまうと、後から値の変更ができなくなる。

const App = () => {
  return (
    <>
      <input type="text" defaultValue="Hello, React!" />
      <input type="radio" name="radio01" value="radio01" defaultChecked={true} />
      <input type="radio" name="radio02" value="radio02" />
    </>
  )
}

道具

    受け取る側
const Hello = () => {
  return <p>Hello, {props.name}!</p>
}

// または{name}として受け取る
const Hello = ({name}) => {
  return <p>Hello, {name}!</p>
}
    渡す側
const App = () => {
  return (
    <>
      <Hello name="text" name="React" />
    </>
  )
}

ReactDOM.render(<App />, document.getElementById("root"));

陈述

    関数コンポーネントでは、stateを管理するには、フックのuseState()を利用する。
// 状態変数、状態を変更するための関数、初期値
const [liked, setLiked] = useState(false);

渲染

    • 次のタイミングでレンダリングが行われる

コンポーネントの初回レンダリング時
コンポーネントのstateがん変化したとき
親コンポーネントがレンダリングされたとき
カスタムフックからコンポーネントが受け取っている変数が変化したとき

React Hooks (响应式钩子)

    • useState

関数コンポーネント内で、state管理ができる

useEffect

副作用（DOMの書き換え、変数代入、API通信など）を追加、制御、副作用関数の実行タイミングをUI構築後まで遅らせる

useMemo

関数の結果を保持する。結果が同じ場合、そこから結果を再取得する。

useCallback

関数自体をメモ化する。React.memoと組み合わせて利用する。

useRef

要素の参照を行う。コンポーネント内で値を保持する。

useContext

Context機能をシンプルに使えるようになる。propsで渡さなくても、Contextに収容されているデータへシンプルにアクセスできる。

カスタムフック

「use」で始まる独自のフック。UIと切り離したロジックの抽出が可能。処理を切り分けることもできる。

学习React/React Hooks的基础知识。

bannerAds