React 插槽 路由 重定向 Redux React-redux

本文用于总结React常用知识。

1 React插槽

原理：组件中写入的HTML，可以传入到props中
使用{this.props.children}将子组件遍历展示

import React from 'react';
import ReactDOM from 'react-dom';

export default class App extends React.Component {
    render() {
        return(
            <div>
                <RootCom></RootCom>
            </div>
        )
    }
}

class ParentCom extends React.Component{
    
    render(){
        console.log(this.props)
        return (
            <div>
                <h1>组件插槽</h1>
                {this.props.children}
                <ChildCom>
                    <h1 data-position="header">这是放置到头部的内容</h1>
                    <h1 data-position="main">这是放置到主要的内容</h1>
                    <h1 data-position="footer">这是放置到尾部的内容</h1>
                </ChildCom>
            </div>
        )
    }
}

class ChildCom extends React.Component{
    render(){
        let headerCom,mainCom,footerCom;
        this.props.children.forEach((item,index)=>{
           if(item.props['data-position']==='header'){
            headerCom = item
           }else if(item.props['data-position']==='main'){
               mainCom = item
           }else{
               footerCom = item
           }
        })
        return (
            <div>
                <div className="header">
                    {headerCom}
                </div>
                <div className="main">
                    {mainCom}
                </div>
                <div className="footer">
                    {footerCom}
                </div>
            </div>
        )
    }
}

class RootCom extends React.Component{
    constructor(props){
        super(props)
        //console.log(props)
        this.state = {
            arr:[1,2,3]
        }
    }
    render(){
        return (
            <ParentCom>
                <h2 data-name="a" data-index={this.state.arr[0]}>子组件1</h2>
                <h2 data-name="b" data-index={this.state.arr[1]}>子组件2</h2>
                <h2 data-name="c" data-index={this.state.arr[2]}>子组件3</h2>
            </ParentCom>
        )
    }
}

2 React路由

安装

//命令行  终端
cnpm install react-router-dom --save

ReactRouter三大组件
Router：所有路由组件的根组件（底层组件），包裹路由规则的最外层容易。
属性：basename可以设置跟路由路径，router可以在一个组件中写多个。
Route：路由规则匹配组件，显示当前规则对应的组件
Link：路由跳转的组件

若精确匹配，在route上设置exact属性

Link的replace属性，点击链接后，将新地址替换成历史访问记录的原地址

引入方式

//Hash模式
import {HashRouter as Router,Link,Route} from 'react-router-dom'
//history模式
import { BrowserRouter as Router, Link, Route } from 'react-router-dom'

示例：

<Router>
            <div>
              <Link to='/'>Home</Link>
              <Link to='/main' replace>Main</Link>
              <Link to='/me'>Me</Link>
            </div>
            <Route path='/' exact component={HomeCom}></Route>
            <Route path='/main' exact component={MainCom}></Route>
            <Route path='/me' exact component={MeCom}></Route>
</Router>

3 重定向

基于react-router-dom的Redirect组件
当跳转到该路径是，重定向到指定路径

function LoginInfo(props) {
  if (props.location.state.loginState === 'success') {
    return <Redirect to='/admin'></Redirect>
  } else {
    return <Redirect to='/login'></Redirect>
  }
}

Switch组件：该组件用于在Router中，当匹配到第一个Route时，不再匹配同路径的其它Route。
用法示例

<Router>
    <Switch>
       <Route path="/form" exact component={FormCom}></Route>
         <Route path='/logininfo' exact component={LoginInfo}></Route>
         <Route path='/abc' exact component={() => (<div>abc1</div>)}></Route>
         <Route path='/abc' exact component={() => (<div>abc2</div>)}></Route>
     </Switch>
 </Router>

4 Redux

redux用于react数据管理，
用于中大型，数据比较庞大，
组件之间有很多交互的情况下使用，

Store：数据仓库，保存数据的地方
State：state是一个对象，数据仓库里的所有数据都放到一个state里
Action：一个动作，触发数据 改变的方法
Dispatch：将动作触发成方法
Reducer：一个函数，通过获取动作，改变数据，生成一个新state

安装redux

cnpm install redux --save

示例代码

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js'
import { createStore } from 'redux';

// 返回新state的reducer函数  动作
const reducer = function (state = { num: 0 }, action) {
  switch (action.type) {
    case "add":
      state.num++;
      break;
    case "decrement":
      state.num--;
      break;
    default:
      break;
  }
  return {...state};
}
//创建数据仓库
const store = createStore(reducer);
function add() {
  //触发reducer函数  
  store.dispatch({ type: "add" })
}
function decrement() {
  //触发reducer函数  
  store.dispatch({ type: "decrement" })
}

class ReduxCom extends React.Component {
  render() {
    let state = store.getState();
    console.log(state)
    return (
      <div>
        <h1>Num：{state.num}</h1>
        {/* 绑定函数 */}
        <button onClick={add}>Num++</button>
        <button onClick={decrement}>Num--</button>
      </div>
    )
  }
}
ReactDOM.render(
  <ReduxCom />,
  // <App></App>,
  document.getElementById('root')
);

// 添加监听
store.subscribe(()=>{
  ReactDOM.render(
    <ReduxCom />,
    document.getElementById('root')
  )
})

5 React-Redux

引入createStore，Provider，connect
同样的，需要创建数据仓库store，动作reducer，按钮触发动作的dispatch
首先定义一个组件

class Counter extends React.Component {
  render() {
    return (
      <div>
        <h1>Num：{this.props.value}</h1>
        <button onClick={this.props.add}>值+1</button>
        <button onClick={this.props.addNum}>值+5</button>
      </div>
    )
  }
}

定义按钮对应的动作

const ActionFn = {
  add: (state, action) => {
    state.num++;
    return state;
  },
  addNum: (state, action) => {
    state.num += action.num;
    return state;
  }
}

将store里的state映射到组件里的props

function mapStateToProps(state) {
  return {
    value: state.num
  }
}

将store中的dispatch映射到组件里的props

function mapDispatchToProps(dispatch) {
  return {
    add: () => { dispatch({ type: 'add' }) },
    addNum: () => { dispatch({ type: 'addNum', num: 5 }) }
  }
}

connect方法用于将组件和数据（方法）进行连接

const Ap = connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter);

引用：Provider组件，自动将store里的state和组件进行关联

class App extends React.Component {
  render() {
    return (
      <div>
        <Provider store={store}>
          <Ap></Ap>
        </Provider>
      </div>
    )
  }
}

本部分内容较为简单，试着敲一下就能掌握