本文用于总结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>
)
}
}
本部分内容较为简单,试着敲一下就能掌握