react知识要点

React:

一．主要终端操作

1. 下脚手架：create-react-app 项目名

2. 起服务：npm start

3. 下包：

npm i axios mockjs node-sass redux redux-logger redux-thunk react-redux react-router-dom -D

(ajax) (数据模拟)(scss)( redux )( 路由 )

二．清空脚手架

1. src文件夹删除App.test.js index.css logo.svg serviceWorker.js setupTests.js 文件

2. index.js文件删除以下代码

（1）import './index.css';----3

（2）import * as serviceWorker from './serviceWorker';-----5

（3）serviceWorker.unregister()-----12

3.App.css清空，准备写入新的样式代码

4.App.js文件删除

import logo from './logo.svg';

&&

<header className="App-header">

<img src={logo} className="App-logo" alt="logo" />

<p>

Edit <code>src/App.js</code> and save to reload.

</p>

<a

className="App-link"

href="https://reactjs.org"

target="_blank"

rel="noopener noreferrer"

>

Learn React

</a>

</header>

三．配路由

1. src文件夹下建立views文件夹，用来配置路由文件

文件格式例

如：

2. 文件格式为.js文件，内容生成快捷方式 rcc （路由文件名首字母大写）

import React, { Component } from 'react'

export default class “文件名” extends Component {

render() {

return (

<div>

</div>

)

}

}

3. 在src文件夹中建route文件夹，放置router-config.js RouterViews.js 两个文件

4. router-config.js 文件中写路由文件的关系

import Home from "../views/home/Home"; ==>引路由文件

import Detail from "../views/Detail";

import Eat from "../views/home/eat/Eat"

import Pay from "../views/home/pay/Pay";

const routes =[ ===>配置路由

{

path:"/home",

component:Home,

children:[

{

path:"/home/eat",

component:Eat

},{

path:"/home/pay",

component:Pay

},{

path:"/home",

redirect:"/home/pay" ===>重定向

}

]

}{

path:"/detail/:id", ===>跳详情需要传入id

component:Detail,

},{

path:"/",

redirect:"/home" ===>重定向

}

]

export default routes ====>抛出

5. RouterViews.js 文件中具体配置路由操作（固定）

import React, { Component } from 'react'

import { Route,Switch,Redirect } from "react-router-dom"

export default class RouterViews extends Component {

render() {

let routes = this.props.routes.filter(v=>v.component)

let redirect = this.props.routes.filter(v=>v.redirect)

return (

<Switch>

{

routes.map((item,index)=>{

return <Route key={index} path={item.path} render={

props=>{

if(item.children){

<item.component routes={item.children} {...props}/>

}

return <item.component {...props} />

}

}></Route>

})

}

{

redirect.map((item,index)=>{

return <Redirect key={index} from={item.path} to={item.redirect} />

})

}

</Switch>

)

}

}

6. App.js 文件

import RouteViews from "./route/RouterViews"

import routes from "./route/router-config"

import { BrowserRouter } from "react-router-dom"

function App() {

return (

<BrowserRouter>

<div className="App">

<RouteViews routes={routes} ></RouteViews> //视图

</div>

</BrowserRouter>

);

}

7. 需要配置路由的页面

import RouteViews from "../../route/RouterViews"

import { NavLink } from "react-router-dom"

（1）导航栏

<NavLink to="/home/pay">路由1</NavLink> //==>to后边写的是路由路径

<NavLink to="/home/eat">路由2</NavLink> //添加点击效果 .active{}

（2）视图

<RouteViews routes={this.props.routes}></RouteViews>

注：简单路由配置

1.App.js

import { BrowserRouter, Switch, Redirect, Route } from 'react-router-dom';

import Home from '../view/home'

<BrowserRouter>

<div className="app">

<Switch>//视图

<Route path="/home" component={Home}></Route>

<Redirect to="/home"></Redirect>

</Switch>

</div>

</BrowserRouter>

2.导航栏

import { NavLink } from 'react-router-dom';

<NavLink path="/home">主页</NavLink>

四．简单样式（scss）

1. 三段式

.index{

width:100%;

height:100%;

display:flex;

flex-direction:column;

header{

width:100%;

height:50px;

}

main{

flex:1;

width:100%;

overflow:true

}

footer{

width:100%;

height:50px;

}

2. 吸顶

position:sticky;

left:0;

top:0; ==>需要吸顶的部分距离顶部位置的负值

3. 横滚

overflow-x: scroll; ==>横向加滚动条

五．数据的模拟与引入

1.src文件夹创建mock文件夹index.js文件

import Mock from 'mockjs'

const data = Mock.mock({

"list|10":[ //10条数据

{

"id|+1":0, //id从0开始每个+1

"name":"@ctitle(8)", //8个随机汉字

"img":"@image(80x80,@color())", //80px*80px的随机色块

"title":"@ctitle(20)", //20个随机汉字

"zan|100-200":110, // 100-200的随机数

} //cname:随机中文名

] //具体看官网

})

Mock.mock('/list',function(){

return data.list

})

2.App.js文件中引用

import "./mock/index"

3.在文件中用axios获取数据

（1）import axios from "axios" //调用插件

（2）state = {

list:[],

}

（3）componentDidMount() {

axios.get("/list").then(res => {

let list = this.props.list

this.setState({

list

})

})

}

4. 使用 this.state.list

六．事件及操作

1. 所有的标签用虚拟dom写在render(){ return(......)}内，并且最外层有一个大盒子包裹，里边所有带js操作的标签都要用{}包裹。

2. 渲染：

this.state.list.map((item,index)=>{

return (<div key={index}>

<p>{item.title}</p>

<img src={item.img} />

</div>)

)}

3. 点击事件

<button className="active" onClick={()=>{

this.to(id)

}}>

to=(id)=>{

}

七．组件

新建components文件夹内创建组件

引用：import Car from './components/car'

使用：<Car />

八．跳详情

1.<dt onClick={() => {

this.jump(item.id)

}}>

2. jump = (id) => {

this.props.history.push("/detail/" + id)

}

3.在detail.js文件中

state={

list:[] //数据

}

componentDidMount(){

axios.get("/list").then(res=>{

let id = this.props.match.params.id;//传过来的id

let list = res.data.filter(v=>v.id==id)[0]

this.setState({

list

})

})

}

九．redux

1. 下包 redux，react-redux， redux-logger， redux-thunk

2. App.js文件中

import { Provider } from "react-redux"

import store from "./store/index"

function App() {

return (

<BrowserRouter>

<Provider store={store}> //redux主要添加这行代码

<div className="App">

<RouteViews routes={routes} ></RouteViews>

</div>

</Provider>

</BrowserRouter>

);

}

3. 在src文件夹中创建store文件夹及index.js文件

import { createStore, applyMiddleware } from "redux";

import logger from "redux-logger";

import thunk from "redux-thunk";

let initState = {

List:[]

//主要写在redux中保存的数据

}

function reducer(state = initState, action) {

state = JSON.parse(JSON.stringify(state))

switch (action.type) {

case 'GET_DATA': //大写的方法名

state.list = action.list //传过来的数据处理后保存到state里

return state

default:

return state;

}

}

const store = createStore(reducer, applyMiddleware(thunk, logger))

export default store

4. 需要redux操作的文件

（1）import { connect } from 'react-redux'

（2）删除自动生成的export default

（3）

let state = state => {

return {

list: state.list, //获取redux的list数据

}

}

let dispatch = dispatch => {

return {

getData(list) {

dispatch({ type: "GET_DATA", list }) //传list用GET_DATA方法

}

}

}

export default connect(state, dispatch)(“文件名”)

（4）存： this.props.getData(data) //用getData方法传data数据给redux

（5）取： this.props.list //取redux内的数据

十．点击返回

this.props.history.go(-1)