Clarify reason for setTextContent helper (#11813)
* Update comment on setTextContent update the comment explaining the reason for the helper * Use `setTextContent` in ReactDOM for consistency
Jason Quense committed
Jan 5, 2018 at 13:10 UTC
4e044f553f0704c0603f857165ea2acbb0940b2b
2 files changed
+8
-6
packages/react-dom/src/client/ReactDOM.js
+2
-1
@@ -43,6 +43,7 @@ import warning from 'fbjs/lib/warning';
43
import * as ReactDOMComponentTree from './ReactDOMComponentTree';
44
import * as ReactDOMFiberComponent from './ReactDOMFiberComponent';
45
import * as ReactInputSelection from './ReactInputSelection';
46
+import setTextContent from './setTextContent';
47
import validateDOMNesting from './validateDOMNesting';
48
import * as ReactBrowserEventEmitter from '../events/ReactBrowserEventEmitter';
49
import * as ReactDOMEventListener from '../events/ReactDOMEventListener';
@@ -736,7 +737,7 @@ const DOMRenderer = ReactFiberReconciler({
737
},
738
739
resetTextContent(domElement: Instance): void {
739
- domElement.textContent = '';
740
+ setTextContent(domElement, '');
741
},
742
743
commitTextUpdate(
packages/react-dom/src/client/setTextContent.js
+6
-5
@@ -3,21 +3,22 @@
3
*
4
* This source code is licensed under the MIT license found in the
5
* LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow
8
*/
9
10
import {TEXT_NODE} from '../shared/HTMLNodeType';
11
12
/**
11
- * Set the textContent property of a node, ensuring that whitespace is preserved
12
- * even in IE8. innerText is a poor substitute for textContent and, among many
13
- * issues, inserts <br> instead of the literal newline chars. innerHTML behaves
14
- * as it should.
13
+ * Set the textContent property of a node. For text updates, it's faster
14
+ * to set the `nodeValue` of the Text node directly instead of using
15
+ * `.textContent` which will remove the existing node and create a new one.
16
*
17
* @param {DOMElement} node
18
* @param {string} text
19
* @internal
20
*/
20
-let setTextContent = function(node, text) {
21
+let setTextContent = function(node: Element, text: string): void {
22
if (text) {
23
let firstChild = node.firstChild;
24