react 记账

1. css normalize是让所有浏览器默认样式基本一样，css reset是让默认样式重置
2. react安装dart-sass

• 使用该命令进行偷梁换柱，让react以为安装的是node-sass，实际上安装的是dart-sass

yarn add node-sass@npm:dart-sass

3. webstorm配合react让css使用src为根路径：标记src为根目录
   image.png
4. react让js使用src为根路径：配置jsconfig.json

"baseUrl": "src",
"include": [
    "src"
  ]

5. react css 方案：styled-components

yarn add  styled-components
yarn add --dev @types/styled-components // 配合typesricpt

6. react router 方案：react-router-dom

yarn add react-router-dom.
yarn add --dev  @types/react-router-dom

7. react 使用 svg

• 把react的webpack配置文件弄出来

yarn eject

• (webpack相关的一般用 -- dev)

yarn add --dev svg-sprite-loader

• 在webpack.config.js里添加

{
    test: /\.svg$/,
    use: [
       { loader: 'svg-sprite-loader', options: {} },
       // 'svg-transform-loader',
        'svgo-loader'
     ]
}

• 安装所需 loader
• require 所有 svg

const importAll = (requireContext: __WebpackModuleApi.RequireContext)=>{
  requireContext.keys().forEach(requireContext)
}
try {
  importAll(require.context('icons',true,/\.svg$/))
}catch (err){
  console.log(err);
}

• 同时需要yarn add --dev @types/webpack-env解决ts报错
• svg去除颜色：源文件里的 fill 删掉
• webpack配置删除svg的所有fill：(新版的配置要加name)

{
  loader: 'svgo-loader', options: {
    plugins: [{name: "removeAttrs",params:{attrs: "fill"}}]
  }
}

8. 如果声明或import了一个变量却不使用，react的treeshaking就会把改代码删掉。这时候需要使用require。因为treeshaking不适用于require
9. 路由高亮：NavLink标签，activeClassName属性

<NavLink to="/money" activeClassName="selected">
            <Icon name="money"/>
            记账
</NavLink>

10. styled components 配合组件
    使用的组件里要在需要的地方使用className={props.className}

const MyLayout = styled(Layout)`
  display: flex;
  flex-direction: column;
`

const Layout = (props: any) => {
  return (
    <Wrapper>
      <Main className={props.className}>
        {props.children}
      </Main>
      <Nav/>
    </Wrapper>
  );
};

• ts可以用typeof获取一个值的类型
• Partial表示子集

const onChange = (obj:Partial<typeof selected>)=>{
    setSelected({
      ...selected,
      ...obj
    })
  }

• ts <>相当于参数
• 想让一个元素居中，可以给其加一个box，然后给这个box设置flex属性（属于黑科技了）
• 路由精准匹配：

<Route path="/tags/:tag" exact={true}>
            <TagEdit/>
</Route>

• <input {...rest}/>
• 函数可以延迟执行代码
• 元素类型继承： &

type Props = {
  name?: string
} & React.SVGAttributes<SVGAElement>

• react 合并 className 的库：

yarn add classnames
yarn add --dev @types/classnames

• ts 的 Omit(...)