React 和 Redux：使用 state 还是 refs？答案

【问题标题】：React and Redux: Using state or refs?React 和 Redux：使用 state 还是 refs？
【发布时间】：2018-12-04 00:46:15
【问题描述】：

我目前正在自学 Redux。为此，我创建了一个简单的 Todo 应用程序。现在在这个应用程序上，我目前正在使用dispatch() 将待办事项放入我的商店。这是关于你的意见的问题。我想避免代码异味。

我找到了两种方法来实现这一点。一种使用state，另一种使用ref。我想知道哪种方式更好？谢谢你的任何建议。两个版本如下。

使用ref的版本一：

import React, { Component } from "react";
import Todo from "./Todo";
import { connect } from "react-redux";
import { ADD_TODO } from "./actionCreators";

class TodoList extends Component {
  taskRef = React.createRef();
  handleSubmit = event => {
    event.preventDefault();
    this.props.dispatch({
      type: ADD_TODO,
      task: this.taskRef.current.value
    });
    event.currentTarget.reset();
  };
  render() {
    let todos = this.props.todos.map((val, index) => (
      <Todo task={val.task} key={index} />
    ));
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label htmlFor="task">Task </label>
          <input type="text" name="task" id="task" ref={this.taskRef} />
          <button type="submit">Add a Todo!</button>
        </form>
        <ul>{todos}</ul>
      </div>
    );
  }
}

const mapDispatchToProps = state => ({
  todos: state.todos
});

export default connect(mapDispatchToProps)(TodoList);

这是使用state的第二个版本：

import React, { Component } from "react";
import Todo from "./Todo";
import { connect } from "react-redux";
import { ADD_TODO } from "./actionCreators";

class TodoList extends Component {
  state = {
    task: ""
  };
  handleSubmit = event => {
    event.preventDefault();
    this.props.dispatch({
      type: ADD_TODO,
      task: this.state.task
    });
    event.target.reset();
  };
  handleChange = event => {
    event.persist();
    this.setState((state, props) => ({
      [event.target.name]: event.target.value
    }));
  };
  render() {
    let todos = this.props.todos.map((val, index) => (
      <Todo task={val.task} key={index} />
    ));
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label htmlFor="task">Task </label>
          <input
            type="text"
            name="task"
            id="task"
            onChange={this.handleChange}
          />
          <button type="submit">Add a Todo!</button>
        </form>
        <ul>{todos}</ul>
      </div>
    );
  }
}

const mapDispatchToProps = state => ({
  todos: state.todos
});

export default connect(mapDispatchToProps)(TodoList);

编辑： 正如 qasimalbaqali 在 cmets 中指出的那样，here 是关于 stackoverflow 的类似帖子。我仍然不确定，因为第一个答案说 refs 不好是有原因的，第二个答案说 React Devs 说 refs 非常适合从 dom 中获取值（这就是我正在做的事情！）。

【问题讨论】：

读一读。它解释了使用状态与参考。总而言之作者更喜欢使用状态来代替，作者给出了这个stackoverflow.com/questions/29503213/…的原因
我根本不使用 refs，只用 state 就可以解决大部分问题。
@qasimalbaqali 我读过它，但我认为那里的答案很复杂。我读到了，在表单输入的用例中，建议使用 refs。嗯……
我个人会在 React 中尽可能使用 state，Facebook 反对经常使用 refs。 reactjs.org/docs/refs-and-the-dom.html#dont-overuse-refs
我认为普遍的共识是 state 应该优先于 refs。根据我自己的经验，我最近完成了一个 web 应用程序的 react 前端，根本不需要使用 refs（或 redux）。我认为输入读取对他们来说是错误的用例，或者至少浪费了 react 出色的状态和事件管理功能

标签： reactjs redux react-redux react-state-management

【解决方案1】：

感谢任何人的帮助。似乎大多数社区都赞成使用状态。

我还问了丹·阿布拉莫夫，他说在这种情况下他更喜欢裁判。你可以看到他的回答here。

感谢大家的意见和建议！ :)

【讨论】：