Upload
others
View
4
Download
0
Embed Size (px)
Citation preview
Declarative style
• Instead of thinking of how you want to accomplish a result, thinking what the component should look like in it’s state.
• Render a component by its props and state
State
• Stores local data of a component
• Can be modified by setState()
• If state is used in render(), whenever state changes, it will trigger re-render automatically.
Downward Data Flow
• Parent can pass data to child components as their props
• Child components render different contents according to the props
props
ParentChild
Upward Data Flow
• Parent can pass callback function to child components as their props
• Child components pass data to parent through the callback function
props
Props.callback(data)
ParentChild
Component Life Cycle
• constructor()
• componentDidMount()
• shouldComponentUpdate()
• componentDidUpdate()
• componentWillUnmount()
• …
Component Life Cycle
• Deprecated methods• componentWillMount()
• componentWillUpdate()
• componentWillReceiveProps()
• Avoid to use them (if possible)
If you want to start a React project quickly
• Create React App is a very useful tool, which handles most configurations for you (like babel and webpack)
• You can use it in your project!
Cookie
• Small piece of data stored locally.
• String only.
• name=value;expires=date;path=path;domain=domain;secure
Using cookie via React
• react-cookie
• Step 1: npm install xxx
• Step 2: import
• Step 3: use their api call • cookie.set(name, val)
• cookie.get(name)
• cookie.remove(name)