如何将具有多种状态的组件转换为反应功能答案

【问题标题】：How to convert component with many states to react functions如何将具有多种状态的组件转换为反应功能
【发布时间】：2020-07-27 20:48:50
【问题描述】：

我是新来的反应，我被卡住了，因为有太多的状态需要转换为钩子，有些必须更新，请帮忙。我需要使用 react 函数来处理 react-redux。

const localizer = momentLocalizer(moment);


class BigCalendar extends Component {

    state = {
        events: [{
            id: 2,
            title: 'DS STARTS',
            start: new Date(2016, 2, 13, 0, 0, 0),
            end: new Date(2016, 2, 20, 0, 0, 0),
        }],


    };

    constructor() {
        super();
        const now = new Date();
    };

    componentDidMount() {

        current().then((data)=>{

        });

        listEvents().then((data) => {


             const events=data;
             this.state = {
                 name: 'React',
                 events,
                 messages: messages,

             };

             this.setState({
                 events:[
                     ...this.state.events,
                     data
                 ]
             })
        });
    }
    handleSelect = ({start, end}) => {
        const title = window.prompt('New Event name');
        if (title) {
            this.setState({
                events: [
                    ...this.state.events,
                    {
                        start,
                        end,
                        title,
                        id: this.id,
                    },
                ],
            });
            createEvent({id: "some id", title: title, start: start, end: end});
        }
    };

    render() {
        return (
            <div>
                <p>
                    A test for the React Big Calendar.
                </p>
                <div style={{height: '500pt'}}>
                    <Calendar
                        events={this.state.events}
                        startAccessor="start"
                        endAccessor="end"
                        selectable
                        onSelectSlot={this.handleSelect}
                        defaultDate={moment().toDate()}
                        localizer={localizer}
                    />
                </div>
            </div>
        );
    }
}
export default BigCalendar;

在 bigCalendar 中单击后，我得到了一个需要更新的状态。我读了很多文章，但我对要更新的操作系统状态感到不知所措

【问题讨论】：

为什么你“需要使用 react 函数来处理 react-redux”？
因为 useSelector 和 useDisatch 只在反应函数组件中工作......我很难理解反应我是新人
你只是在问如何将基于类的组件转换为函数式组件？

标签： javascript reactjs react-redux react-hooks react-functional-component

【解决方案1】：

当您有多个需要保持状态的数据时，您可以使用多个 useState 挂钩（每个状态值一个）：

const [id, setId] = useState(2);
const [title, setTitle] = useState('DS STARTS');
// ...

或者您可以使用单个对象值：

const [event, setEvent] = useState({
  id: 2,
  title: 'DS STARTS',
  // ...

一般来说，前者更好，因为当不相关的数据发生变化时，您不会不必要地重新渲染。但这仅适用于不相关的数据：如果所有数据在概念上都有关联，那么将它们保存在同一个对象中是有意义的。

例如，如果您有foo 和bar，子组件A 依赖于foo，子组件B 依赖于bar，并且foo 发生变化，bar 将得到重新-rendered（虽然只在虚拟 DOM 中，假设它返回相同的 JSX）... 如果您对两者都使用单个状态对象。如果它们是单独的状态，但更新一个不会影响依赖于另一个的组件。

（但同样，如果 A 和 B 都依赖于 foo 和 bar，即如果数据已连接，则这些都不重要。）

此外，您可以使用对象值执行foo.baz = 5 ...并忘记不会触发重新渲染（您必须执行setFoo({...foo, baz: 5})）。非对象没有这个问题。

我个人也觉得使用单独的 useState 钩子在人类层面上更干净，因为它确实让“状态变量”感觉更像是常规变量，在“每个概念信息片段”的意义上。

附：如果你有一个复杂的应用程序，你有很多状态：没有办法“解决”它。但是，如果您的问题是必须在组件之间传递大量状态值，那么您应该阅读 React 中的上下文，因为它旨在解决该问题。

【讨论】：