[React] React Fundamentals: Component Lifecycle - Mounting Basics
React components have a lifecycle, and you are able to access specific phases of that lifecycle. This lesson will introduce mounting and unmounting of your React components.
Mounting: componentWillMount
Invoked once, both on the client and server, immediately before the initial rendering occurs. If you call setState
within this method, render()
will see the updated state and will be executed only once despite the state change.
Mounting: componentDidMount
Invoked once, only on the client (not on the server), immediately after the initial rendering occurs. At this point in the lifecycle, the component has a DOM representation which you can access via React.findDOMNode(this)
.
If you want to integrate with other JavaScript frameworks, set timers using setTimeout
orsetInterval
, or send AJAX requests, perform those operations in this method.
Unmounting: componentWillUnmount
Invoked immediately before a component is unmounted from the DOM.
Perform any necessary cleanup in this method, such as invalidating timers or cleaning up any DOM elements that were created in componentDidMount
.
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>React Lesson 9: Mounting</title> </head> <body> <div id="panel"></div> <button onClick="Render()">Render</button> <button onClick="Unmount()">Unmonut</button> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/JSXTransformer.js"></script> <script type="text/jsx"> var App = React.createClass({ getInitialState: function(){ return { val: 0 } }, update: function() { var newVal = this.state.val + 1; this.setState({val: newVal}); }, componentWillMount: function() { console.log("Will mount"); }, componentDidMount: function() { console.log("Did mount"); }, componentWillUnmount: function() { console.log("Byebye"); }, render: function(){ console.log("render"); return <button onClick={this.update}>{this.state.val}</button> } }); window.Render = function() { React.render(<App />, document.getElementById('panel')); } window.Unmount = function() { React.unmountComponentAtNode(document.getElementById('panel')); } </script> </body> </html>
相关文章
- [React] Broadcaster + Operator + Listener pattern -- 19. useBroadcaster & useListener
- [React Performance] Use CSS Variables instead of React Context?
- [React] Using react-styleguidist for Component demo
- [React Testing] Mock react-transition-group in React Component Tests with jest.mock
- [GraphQL] Apollo React Query Component
- [React] Refactor a Stateful List Component to a Functional Component with React PowerPlug
- [React Native] Use the SafeAreaView Component in React Native for iPhone X Compatibility
- [React Intl] Format Numbers with Separators and Currency Symbols using react-intl FormattedNumber
- [React] Test friendly approach
- [React Fundamentals] Component Lifecycle - Mounting Usage
- [React Fundamentals] Component Lifecycle - Mounting Basics
- [React] Integration test a React component that consumes a Render Prop
- [React & Testing] Simulate Event testing
- [React] Use React.cloneElement to Modify and Add Additional Properties to React Children
- [React Fundamentals] Component Lifecycle - Mounting Usage
- [React Fundamentals] Component Lifecycle - Mounting Basics
- [React Native] Using the Image component and reusable styles
- [React] React Router: setRouteWillLeaveHook
- [React] Styling a React button component with Radium
- 【视频】React ReduxToolkit状态管理:创建store对象及redux调试工具的安装方法