javascript - 在 React (v15) 的 render() 中访问 DOM

Question

当我研究React时，我发现了以下代码。

据我了解，React 中的 DOM 通常是通过 Refs 访问的。

但是，这段代码使用了文档，而且我还没有看到有人使用这种方式。

我是不是理解错了？这是正式的方式吗？

另外，document.form 与 document.getElementByTagName("form") 相同吗？

任何引用都会有帮助。

    export default class IssueAdd extends React.Component {
    constructor() {
        super();
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(e) {
        e.preventDefault();
        const form = document.forms.issueAdd;
        this.props.createIssue({
            owner: form.owner.value,
            title: form.title.value,
            status: 'New',
            created: new Date(),
        });
        form.owner.value = '';
        form.title.value = '';
    }

    render() {
        return (
            <div>
                <form name="issueAdd" onSubmit={this.handleSubmit}>
                    <input type="text" name="owner" placeholder="Owner" />
                    <input type="text" name="title" placeholder="Title" />
                    <button>Add</button>
                </form>
            </div>
        );
    }
}

Answer 1

React 只是另一个 javascript 库，因此它具有您在普通 javascript 中可能使用的所有功能，例如访问 window 对象或 document 对象。 但这是否意味着您应该使用它们，绝对不，并且 you will find the reasons here 。直接 DOM 操作是非常昂贵的操作。

基本上，React 的工作原理是 virtual DOM 。虚拟 DOM 使得 React 更新实际 DOM 变得简单且更快，而无需超出多个直接 DOM 操作的开销。

来到 refs，因为我们不想使用 document 对象访问 HTML 元素 React 提供了 Refs，这将有助于进入特定元素并快速访问它(它将返回数据来自虚拟 DOM)。

关于引用文献的几篇好文章:

• http://jamesknelson.com/react-js-by-example-interacting-with-the-dom/
• https://hackernoon.com/refs-in-react-all-you-need-to-know-fb9c9e2aeb81

当然还有

• https://reactjs.org/docs/refs-and-the-dom.html

BTW: Welcome to the wonderful world of React :)