Reactjs React和Redux：使用state还是refs？

我现在正在教我的自我复述。为此，我创建了一个简单的Todo应用程序。现在，在这个应用程序中，我正在使用

dispatch（）

将todo放入我的存储中。这是一个关于你意见的问题。我想避免代码气味

我找到了两种实现这一目标的方法。一个使用

状态

，一个使用

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);

---

编辑：正如评论中指出的，是一篇关于stackoverflow的类似文章。我仍然不确定，因为第一个答案说REF有理由不好，第二个答案说React开发人员说REF从dom中获取值非常棒（这就是我正在做的！）。

谢谢大家的帮助。似乎社区中的大多数人都赞成使用国家

我还问了丹·阿布拉莫夫，他说他更喜欢裁判。 你可以看到他的答案

---

谢谢大家的意见和建议！：）

看看这个。它解释了如何使用state vs ref。总之，作者更喜欢使用state，作者给出了原因，我根本不使用refs，并且可以用just state解决大多数问题。@qasimalbaqali我读过它，但我认为答案很复杂。我读到，在表单输入的用例中，建议使用refs。嗯……我个人会在任何你能做出反应的地方使用state，Facebook反对经常使用refs。我认为普遍的共识是国家应该优先于裁判。根据我自己的经验，我最近完成了一个web应用程序的react前端的编写，根本不需要使用refs（或redux）。我认为输入读取对于他们来说是错误的用例，或者至少是对react优秀的状态和事件管理功能的浪费

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);