From 77196100b833cca83a928caa2bd02482665546c2 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Wed, 14 Mar 2018 09:43:20 -0700 Subject: [PATCH] Renamed createRef .value attribute to .current (#12375) * Renamed createRef .value attribute to .current * Warn if invalid ref object is passed --- .../src/__tests__/ReactComponent-test.js | 4 +- .../ReactErrorBoundaries-test.internal.js | 6 +- .../src/ReactFiberCommitWork.js | 19 +++++- packages/react/src/ReactCreateRef.js | 2 +- .../src/__tests__/ReactCreateRef-test.js | 60 +++++++++++++++++++ packages/shared/ReactTypes.js | 2 +- 6 files changed, 84 insertions(+), 9 deletions(-) create mode 100644 packages/react/src/__tests__/ReactCreateRef-test.js diff --git a/packages/react-dom/src/__tests__/ReactComponent-test.js b/packages/react-dom/src/__tests__/ReactComponent-test.js index d08ba34a27..9c2d6447ff 100644 --- a/packages/react-dom/src/__tests__/ReactComponent-test.js +++ b/packages/react-dom/src/__tests__/ReactComponent-test.js @@ -235,8 +235,8 @@ describe('ReactComponent', () => { } componentDidMount() { - expect(this.innerRef.value.getObject()).toEqual(innerObj); - expect(this.outerRef.value.getObject()).toEqual(outerObj); + expect(this.innerRef.current.getObject()).toEqual(innerObj); + expect(this.outerRef.current.getObject()).toEqual(outerObj); mounted = true; } } diff --git a/packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js b/packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js index defcd6228b..bec420aeab 100644 --- a/packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js +++ b/packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js @@ -1019,12 +1019,14 @@ describe('ReactErrorBoundaries', () => { 'ErrorBoundary render error', 'ErrorBoundary componentDidUpdate', ]); - expect(errorMessageRef.value.toString()).toEqual('[object HTMLDivElement]'); + expect(errorMessageRef.current.toString()).toEqual( + '[object HTMLDivElement]', + ); log.length = 0; ReactDOM.unmountComponentAtNode(container); expect(log).toEqual(['ErrorBoundary componentWillUnmount']); - expect(errorMessageRef.value).toEqual(null); + expect(errorMessageRef.current).toEqual(null); }); it('successfully mounts if no error occurs', () => { diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.js b/packages/react-reconciler/src/ReactFiberCommitWork.js index 831a391d42..cd68855643 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.js @@ -29,6 +29,7 @@ import { import ReactErrorUtils from 'shared/ReactErrorUtils'; import {Placement, Update, ContentReset} from 'shared/ReactTypeOfSideEffect'; import invariant from 'fbjs/lib/invariant'; +import warning from 'fbjs/lib/warning'; import {commitCallbacks} from './ReactFiberUpdateQueue'; import {onCommitUnmount} from './ReactFiberDevToolsHook'; @@ -147,7 +148,7 @@ export default function( } } } else { - ref.value = null; + ref.current = null; } } } @@ -315,7 +316,19 @@ export default function( if (typeof ref === 'function') { ref(instanceToUse); } else { - ref.value = instanceToUse; + if (__DEV__) { + if (!ref.hasOwnProperty('current')) { + warning( + false, + 'Unexpected ref object provided for %s. ' + + 'Use either a ref-setter function or Reacte.createRef().%s', + getComponentName(finishedWork), + getStackAddendumByWorkInProgressFiber(finishedWork), + ); + } + } + + ref.current = instanceToUse; } } } @@ -326,7 +339,7 @@ export default function( if (typeof currentRef === 'function') { currentRef(null); } else { - currentRef.value = null; + currentRef.current = null; } } } diff --git a/packages/react/src/ReactCreateRef.js b/packages/react/src/ReactCreateRef.js index 8af60100e6..326caddae9 100644 --- a/packages/react/src/ReactCreateRef.js +++ b/packages/react/src/ReactCreateRef.js @@ -11,7 +11,7 @@ import type {RefObject} from 'shared/ReactTypes'; // an immutable object with a single mutable value export function createRef(): RefObject { const refObject = { - value: null, + current: null, }; if (__DEV__) { Object.seal(refObject); diff --git a/packages/react/src/__tests__/ReactCreateRef-test.js b/packages/react/src/__tests__/ReactCreateRef-test.js new file mode 100644 index 0000000000..683d3ddf01 --- /dev/null +++ b/packages/react/src/__tests__/ReactCreateRef-test.js @@ -0,0 +1,60 @@ +/** + * Copyright (c) 2013-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @emails react-core + */ + +'use strict'; + +let React; +let ReactTestRenderer; + +describe('ReactCreateRef', () => { + beforeEach(() => { + jest.resetModules(); + + React = require('react'); + ReactTestRenderer = require('react-test-renderer'); + }); + + it('should warn in dev if an invalid ref object is provided', () => { + function Wrapper({children}) { + return children; + } + + class ExampleComponent extends React.Component { + render() { + return null; + } + } + + expect(() => + ReactTestRenderer.create( + +
+ , + ), + ).toWarnDev( + 'Unexpected ref object provided for div. ' + + 'Use either a ref-setter function or Reacte.createRef().\n' + + ' in div (at **)\n' + + ' in Wrapper (at **)', + ); + + expect(() => + ReactTestRenderer.create( + + + , + ), + ).toWarnDev( + 'Unexpected ref object provided for ExampleComponent. ' + + 'Use either a ref-setter function or Reacte.createRef().\n' + + ' in ExampleComponent (at **)\n' + + ' in Wrapper (at **)', + ); + }); +}); diff --git a/packages/shared/ReactTypes.js b/packages/shared/ReactTypes.js index bede9f00e3..f6a56ccc96 100644 --- a/packages/shared/ReactTypes.js +++ b/packages/shared/ReactTypes.js @@ -101,5 +101,5 @@ export type ReactPortal = { }; export type RefObject = {| - value: any, + current: any, |};