ReactにおけるStateとPropsの違い

Reactにおけるstateとpropsの違いを日本語で解説

Reactにおいて、stateとpropsはコンポーネントのデータ管理において重要な役割を果たしますが、その性質や用途は異なります。

state

• コンポーネントが再レンダリングされる原因となる
• setState()メソッドを使用して更新される
• コンポーネント自身の状態や挙動を決定する
• コンポーネント内部で管理されるデータ

例

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count +    1 });
  }

  render() {
    return (
      <div>
        Count: {this.state.count}
        <button onClick={this.increment}>Increment</butto   n>
      </div>
    );
  }
}

props

• コンポーネントの親から子へと伝達される
• コンポーネント自身では変更できない

function Greeting(props) {
  return (
    <h1>Hello, {props.name}!</h1>
  );
}

要約

• props
  外部から提供されるデータで、コンポーネントの構成や表示を決定する。
• state
  コンポーネント自身の内部データで、コンポーネントの挙動を制御する。

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count +    1 });
  }

  render() {
    return (
      <div>
        Count: {this.state.count}
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

• 再レンダリング
  setState()が呼び出されると、コンポーネントが再レンダリングされ、更新されたcountの値が表示されます。
• setState()による更新
  incrementメソッドでsetState()を使用してcountの値を更新しています。
• sta   teの初期値
  constructor内でstateオブジェクトを初期化しています。

function Greeting(props) {
  return (
    <h1>Hello, {props.name}!</h1>
  );
}

• propsの利用
  props.nameを使用して、外部から渡された名前を表示しています。
• propsの受け取り
  Greetingコンポーネントはpropsオブジェクトを受け取っています。

useContext

• createContext()でコンテキストを作成し、useContext()でコンテキストの値を取得する
• コンポーネントの階層関係に依存しない
• コンポーネントツリー全体でデータを共有する

const ThemeContext = createContext();

function App() {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme, set   Theme }}>
      <ChildComponent />
    </ThemeContext.Provider>
  );
}

function ChildComponent() {
  const { the   me } = useContext(ThemeContext);

  return (
    <div style={{ backgroundColor: theme === 'light' ? 'white' : 'black' }}>
      {/* コンテンツ */}
    </div>
  );
}

Redux

• storeを作成し、dispatch()でアクションを発行して状態を更新する
• 複雑な状態管理や非同期処理に適している
• アプリケーション全体で状態を管理する

import { createStore } from 'redux';

const initialState = { count: 0 };

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      retur   n { count: state.count + 1 };
    default:
      return state;
  }
}

const store = createStore(reducer   );

function Counter() {
  const { count } = useSelector(state => state);
  const dispatch = useDisp   atch();

  return (
    <div>
      Count: {count}
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
    </div>
  );
}

• Class Components
  クラスコンポーネントを使用し、this.stateで状態を管理する。
• Hooks
  useStateやuseEffectなどのHooksを使用して、コンポーネントの内部状態を管理する。

• Hooks
  コンポーネントの内部状態を管理する。
• Redux
  アプリケーション全体で状態を管理する。
• useContext
  コンポーネントツリー全体でデータを共有する。