React

读取数据——直接fetch

--------------------------------------------------------------------------------

父->子
  子级：暴露方法
  父级：ref引用子级->子级.方法()

子->父
  父级：暴露方法
  子级：引用父级.方法()

暴露方法
  父->子      ref
  子->父      props

--------------------------------------------------------------------------------

统一管理      √       redux

--------------------------------------------------------------------------------

router
redux数据管理

--------------------------------------------------------------------------------

//1.外层
<BrowserRouter>
  //2.单一父级
  <div>
    ...

    //3.类似<select>
    <Switch>
      //4.类似<option>
      <Route exact path="xxx" component={xxx} />
      <Route path="xxx" component={xxx} />
    </Switch>

    ...
  </div>
</BrowserRouter>

--------------------------------------------------------------------------------

<Link to="path">xxx</Link>

--------------------------------------------------------------------------------

路由参数：
this.props.match.params

--------------------------------------------------------------------------------

redux

--------------------------------------------------------------------------------

import {createStore} from 'redux';

//创建store对象
const store=createStore(function (state, action){
  //根据action修改state

  return state;
});

//使用store对象
//设置
store.dispatch({type, xxx});
//读取
store.getState();
//订阅
store.subscribe(function (){});

--------------------------------------------------------------------------------

createStore(function (state, action){     //修改、初始化
  return state;
});

store.dispatch({action});
store.getState()  =>  state对象
store.subscribe(function (){    //修改状态

});

--------------------------------------------------------------------------------

"react-cli"   react-create-app

router
  <BrowserRouter>
    ...
    <Link to="xxx">aa</Link>

    <Switch>
      <Route exact path component />
    </Switch>

    ...

  this.props.match.params

redux
  //1.创建
  createStore(function (state={...}, action){
    return state;
  });

  //2.使用
  store.dispatch({action});
  store.subscribe(function (){
    store.getState()
  });