Some ReactJS notes:
- Never write to
this.props, treat it as immutable
type Component :: props -> state -> HTML
- React components can only render a single root node.
- namespaced components
- expression wrap with
- comments must be within
- expression can eval to JSX components
- supports spread attributes,
- custom attributes should start with
- Callbacks are auto-bound to the component instance, uses event delegation meaning handlers are not bind to the dom node.
- Try to keep as many of your components as possible stateless. By doing this you’ll isolate the state to its most logical place and minimize redundancy, making it easier to reason about your application.
- A common pattern is to create several stateless components that just render data, and have a stateful component above them in the hierarchy that passes its state to its children via props. The stateful component encapsulates all of the interaction logic, while the stateless components take care of rendering data in a declarative way.
- Do NOT store computed data in
- Parent component can read its children at
React.Children.utilitiesyo manipulate them
- Stateful children should be handled with careful.
- Component can have
keys to maintain its identity. Use keyd fragments to maintain order of a set of groups of children.
ReactFragment React.addons.createFragment(object children)
- Break down UI elements into reusable components.
React.PropTypescan be used to validate props, for performance reasons these validations only happend in development mode.
getDefaultPropsto define default values for
- Controlled component vs. uncontrolled component
- Since the event system is implemented by React, sometimes we want to
mainipulate DOM node directly, use
- Never retain
- If you have not programmed several apps with React, your first inclination is usually going to be to try to use refs to “make things happen” in your app. If this is the case, take a moment and think more critically about where state should be owned in the component hierarchy. Often, it becomes clear that the proper place to “own” that state is at a higher level in the hierarchy. Placing the state there often eliminates any desire to use refs to “make things happen” – instead, the data flow will usually accomplish your goal.