React 16.3 introduces the following new features
Context API
React 16.3 Context API helps us pass data through the component tree without having to pass them as props through each level of sub-component. Calling the createContext() provides us a Provider and a Consumer component. The Provider declares the data which should be made available to the child components in the component tree. The Consumer components can receive the data declared in the Provider.
createRef API
The React.createRef API from React 16.3 provides us a structured way to handle refs instead of the conventional string refs in the previous versions. We should create a ref using React.createRef() and attach it to the required element/control using the ref attribute. Once assigned the ref can be accessed throughout the component using this.<refName>.current
ref Forwarding in React 16.3
When we create nested components in react, react does not allow accessing the DOM of the inner element through refs, The ref on the wrapper component points to the wrapper component and not the inner component. In some cases we might need to access the inner component through refs, react 16.3 provides a way to achieve this using ref Forwarding.
Component Lifecycle Changes in React 16.3
React 16.3 brings some changes to the component lifecycle methods, 3 of the existing component lifecycle methods will depreciate and 2 new methods are introduced.
The following life cycle methods will eventually depreciate. These methods will continue to work till React 17.0
componentWillMount
componentWillUpdate
componentWillReceiveProps
The following new life cycle methods are introduced.
static getDerivedStateFromProps
getSnapshotBeforeUpdate
StrictMode
StrictMode is React 16.3 is similar to the "use strict" directive in JavaScript. StrictMode in React enforces additional checks to ensure best practices, when a component uses StrictMode any issues in that component or its child components will be displayed as warnings in the browser console. The StrictMode warning messages will be displayed only in development mode and not in production.
Strict mode will display warning for string refs, unsave lifecycle methods etc.
- Context API
- createRef API
- ref Forwarding
- new Component Lifecycle Changes
- StrictMode
Context API
React 16.3 Context API helps us pass data through the component tree without having to pass them as props through each level of sub-component. Calling the createContext() provides us a Provider and a Consumer component. The Provider declares the data which should be made available to the child components in the component tree. The Consumer components can receive the data declared in the Provider.
createRef API
The React.createRef API from React 16.3 provides us a structured way to handle refs instead of the conventional string refs in the previous versions. We should create a ref using React.createRef() and attach it to the required element/control using the ref attribute. Once assigned the ref can be accessed throughout the component using this.<refName>.current
ref Forwarding in React 16.3
When we create nested components in react, react does not allow accessing the DOM of the inner element through refs, The ref on the wrapper component points to the wrapper component and not the inner component. In some cases we might need to access the inner component through refs, react 16.3 provides a way to achieve this using ref Forwarding.
Component Lifecycle Changes in React 16.3
React 16.3 brings some changes to the component lifecycle methods, 3 of the existing component lifecycle methods will depreciate and 2 new methods are introduced.
The following life cycle methods will eventually depreciate. These methods will continue to work till React 17.0
componentWillMount
componentWillUpdate
componentWillReceiveProps
The following new life cycle methods are introduced.
static getDerivedStateFromProps
getSnapshotBeforeUpdate
StrictMode
StrictMode is React 16.3 is similar to the "use strict" directive in JavaScript. StrictMode in React enforces additional checks to ensure best practices, when a component uses StrictMode any issues in that component or its child components will be displayed as warnings in the browser console. The StrictMode warning messages will be displayed only in development mode and not in production.
Strict mode will display warning for string refs, unsave lifecycle methods etc.
No comments:
Post a Comment