buuoltwo/crash.sandbox

crash.sandbox

nvm -v
npm -v
node -v
npm install -g yarn
 npm install create-react-app -g

react-with-ts

App.tsx

create-react-app --template typescript react-with-ts
cd react-with-ts && yarn start

1. interface:useState<IState['brands']>([])
2. React.FC
3. Converting .jsx to .tsx: --Stackoverflow

react-usecontext

1. creating multiple nested components

   parent -> child1 -> child2 -> ... -> child5

2. child5 would apply the value of hook useContext as to render.

react-memo

what is React.memo

eng:https://devdocs.io/react/react-api#reactmemo

zh-cn:https://zh-hans.reactjs.org/docs/react-api.html#reactmemo

1. create a index.js file, then append a child called Swatch

2. index.js is a React component,

• it has states： count, color
• two buttons can control its states and Re-Render App
• Swatch receive props includes color

3. Swatch without memo:

SWATCH HAS SAME PROPS:	click color button 5 times	ReRender App && Re-Render Swatch
SWATCH HAS Different PROPS:	click color button 5 times	ReRender App && Re-Render Swatch

4. Swatch wrapped in memo:

 const T = React.memo(Swatch)
 return <T color={color}></T>

SWATCH HAS SAME PROPS:	click count button 5 times	ReRender App Only
SWATCH HAS Different PROPS:	click color button 5 times	ReRender App && Re-Render Swatch