React随笔(不一定啥时候更新)

create脚手架

Create-react-app -> yarn eject 创建基础架构

目录树结构大致如此

├── api
│   ├── api.js
│   └── server.js
├── assets
├── components
├── envconfig
│   └── envconfig.js
├── index.js
├── index.less
├── logo.svg
├── page
│   └── index
│       ├── index.jsx
│       └── index.less
├── registerServiceWorker.js
├── router
│   └── index.jsx
├── store
├── style
└── utils
    ├── asyncComponent.jsx
    ├── asyncComponent.pxq.jsx
    └── setRem.js

优良插件

axios(qs) 处理 ajax qs方便处理参数
Babel-polyfill 转换es高级语法
react-router-dom 路由插件包含核心插件 react-router
react-hot-loader 热加载局部更新区别于webpack不走打包
classnames 处理jsx中的classname属性判断
Fastclick 好像都挺爱用
Prop-types参数类型检查
immutable 值的固定(感觉很高端, 目前觉得不好用)
redux-thunk redux中间件必备
redux 这三个东西还是很好用的(createStore, combineReducers, applyMiddleware)

Router

// Router 常用 *react-router-dom*
// HashRouter&&BrowserRouter Switch用来存放Route
import { HashRouter, Switch, Route, Redirect } from 'react-router-dom’;
// Redirect 重定向页面 常用于404
<Route path="/" exact component={home} />
<Route component={home} />
<Redirect to="/" />

两种情况都可以达到找不到对应路由重定向到home页面的效果不同在于链接会不会变化前者不变只是内容显示

Little point

Webpack 直接想用@ 选中src 需要在config dev和prod中定义
resolve > alias > '@': path.join(__dirname, '..', 'src'),
Jsx不用非写在jsx文件里打包时候记得babel处理下就行
constructor不是必须写的 state也可以直接写在外面
asyncComponent 函数异步引用组件
无状态组件和react.Component传递props区别 react.Component

import React, { Component } from 'react'

export default class Menu extends Component {
  render() {
    return <div className="menu">{this.props.children}</div>
  }
}

无状态组件

const Menu = (props) => <div className="menu">{props.children}</div>

export default Menu

组件干组件自己的事循环交给外层使用组件时候去做组件自己取要用的参数就好

const MenuItem = ({ item, index }) => (
  <li className="menu-list-item" key={index}>
    <div className="item-mask" style={{ backgroundImage: `url(${item.image})` }} />
    <div className="item-footer">
      <p className="item-footer-title">{item.title}</p>
      <div className="item-footer-author">{item.author}</div>
    </div>
  </li>
)

export default (_) => (
  <Menu>
    <ul className="menu-list">
      {data.map((item, index) => {
        const Props = { item, index }
        return <MenuItem {...Props} />
      })}
    </ul>
  </Menu>
)