React 데이터 흐름 관리 가이드: 프런트엔드 데이터 흐름을 적절하게 처리하는 방법

class ParentComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0
    };
  }
  
  incrementCount() {
    this.setState(prevState => ({
      count: prevState.count + 1
    }));
  }
  
  render() {
    return (
      <div>
        <ChildComponent count={this.state.count} />
        <button onClick={() => this.incrementCount()}>增加计数</button>
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        当前计数：{this.props.count}
      </div>
    );
  }
}

// store.js
import { createStore } from 'redux';

const initialState = {
  count: 0
};

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

const store = createStore(reducer);

export default store;

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

// App.js
import React from 'react';
import { connect } from 'react-redux';

class App extends React.Component {
  render() {
    return (
      <div>
        当前计数：{this.props.count}
        <button onClick={this.props.increment}>增加计数</button>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  count: state.count
});

const mapDispatchToProps = dispatch => ({
  increment: () => dispatch({ type: 'INCREMENT' })
});

export default connect(mapStateToProps, mapDispatchToProps)(App);