React is the front-end framework used in lg-sim WebUI(version 2019.07). as well for Cruise webviz, Uber visualization, Apollo, they all choose a web UI design, there is something great about web framework.
what is React
used to build complex UI from small and isolated pieces of code “components”
|
|
React will render the html on screen, and any changes in data will update and rerender. render() returns a description(React element) of what you want to see on the screen, React takes the descriptions and displays the result.
build a react hello-world app
|
|
index.js
index.js is the traditional and actual entry point for all Node apps. in React, it tells what to render and where to render.
components
components works as a func, and props is the func’s paramters, the func will return a React element which then rendered in view
components can be either class, derived from React.Component, which then has this.state and this.setState() ;
or a function, which need use Hook to keep its state.
the design advantage of components is obvious: to make components/modules reuseable. usually in route.js will define the logic switch to each component based on the HTTP request.
setState
whenever this.setState() takes an object or a function as its parameter, update it, and React rerender this component. when need to change a component state, setState() is the right way, rather than to use this.state = xx, which won’t register in React.
Hook
example from stateHoook
|
|
Hook is a speicial feature, used to share sth with React function. e.g. useState is a way to keep React state in function, which by default has no this.state
in Hook way, even afer function() is executed, the function’s variable is not clear, but keep until next render. so basically Hook give a way to make function stateable.
- intial hook
the only parameter pass in hook::useState(new Map()) is the initial state. useState(initState)
- return from useState
it returns a pair [currentState, setStatefunc], e.g. [maps, setMaps], setStatefunc here is similar as this.setState in class component
- access state
directly {currentState}
- update state
{() => setStatefunc(currentState)}
Context
context gives the way to access data, not in the strict hierachy way. the top
createContext
as in react context official doc
|
|
during render, the component which subscribe this context will get the context content from its context provider and put in rendering, only when no avialable provider is found, defaultValue is used.
|
|
whenever the value in Provider changes, all consumers will rerender.
EventSource
EventSource is HTTP based one-way communication from server to client, which is lighter than Websocket eventsource vs websocket, also the message type is only txt in EventSource, while in Websocekt it can be either txt or binary stream.
by default, when client received a [“/event”] message, will trigger onMessage(). but EveentSource allow to define user-speicial event type, e.g. VehicleDownload, so in client need to a new listener:
|
|
react route
js special
first class object
- a function is an instance of the Object type
- a function can have properties and has a link back to its constructor method
- can store a function in a variable
- pass a function as a parameter to another function
- return a function from another function