目录
1.react基础:类组件、函数式组件、ES5/ES6继承
在创建一个vue项目的时候，
1.在index.js文件中引入react模块，引入在需要的节点所需要的组件
import React from 'react'； // 必须要引入的模块
import ReactDOM from 'react-dom'； // 给某一个DOM节点渲染时用到，它是从react中分离出来的
import App from '@/components/App'; // React的一个组件
// 将虚拟的组件渲染到视图中
// 组件名字必须是大写，如果是小写的话它会认为是html标签，组件的文件名也建议大写
ReactDom.render ( // render是一个钩子函数
<APP />,
document.getElementById('root') //表示的是组件放到哪个节点中
)
2.在components文件夹下，编写组件App.jsx
import React from 'react'
/**
在react中开发组件模式:
> ES6 class类写法 类组件
> ES6 箭头函数写法 函数式组件 ----无状态组件
*/
// return() ()内部的代码写的是虚拟Dom，符合jsx语法
//class 类：
class App extends React.Component {
render () {
return (
<div>hello react</div>
)
}
}
export default App;
// 函数式组件
const App = () => {
return (
<div> hello function</div>
)
}
如何选择类组件还是函数式组件？
如果一个组件需要有状态，那么一定不要写函数式组件，函数式组件又会被成为 无状态组件，函数式组件一般会使用为UI组件（只负责渲染视图，数据都来源于父组件）---- 在react16.8的时候要注意一下（有另一种说法）
- ES5 的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。
- ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。
子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象。
2.生命周期钩子函数
React的生命周期的钩子函数
挂载时 ---------- 初始化阶段
- constructor() -------声明属性
- componentWillMount() --------即将挂载组件
- render() --------初次渲染数据
- componentDidMount() ----------组件挂载完毕，可以在此处进行请求数据
更新时 ---------运行时阶段
- componenttWillReceiveProps(nextProps) --------将接收到组件的数据
- shouldComponentUpdate() ------------- 当state或者props发生改变时，组件是否更新，默认更新，返回值为布尔类型
- componentWillUpdate() ------------组件即将更新
- render() -------------组件更新
- componentDidUpdate() ----------------组件更新完毕，dom操作
卸载时 ---------销毁阶段
- componentWillUnmount() -------------组件销毁---定时器、计数器等
错误处理
- componentDidCatch() --------当react组件数出现错误时执行
常用的react的生命周期钩子函数
constructor() 通过给 this.state 赋值对象来初始化内部 state。为事件处理函数绑定实例
render() 只要是组件就必须有的
componentDidMount() 如果需要请求数据，如果需要DOM操作，实例化操作
componentDidUpdate() 如果需要DOM操作，实例化操作
componentWillUnmount() 如果需要清除定时器，计时器，实例对象
3.什么是JSX
jsx它既不是一个字符串也不是一个HTML，是javascript的语法拓展。jsx可以生成react中的元素，组件就是由元素组成的。
jsx的特性属性，在属性中嵌入javascript代码时，在大括号外面不用加引号
jsx可以防止javascript脚本攻击，因为在渲染的时候，它会先将代码转化成字符串。
4.props和state有什么区别
props是只读的，它用在组件与组件之间
可以把props理解为从外部传入组件内部的数据。由于React是单向数据流，所以props基本上也就是从服父级组件向子组件传递的数据。
state可读可写，它用在组件内
它就是数据的状态
state是组件自己管理数据，控制自己的状态，可变；props是外部传入的数据参数，不可变；- 没有
state的叫做无状态组件，有state的叫做有状态组件； - 多用
props，少用state。也就是多写无状态组件。
5.路由配置
项目目录树：入口找布局，布局找页面，页面找的是组件，组价中可以找子组件
-
在入口文件中配置路由
import { BrowserRouter as Router, Switch, Route } from react-router-dom import App from '@/layout/App' import Detail from '@/layout/Detail' <Router> <Switch> <Route path="/detail" component={ Detail } /> <Route path="/" component={ App } /> </Switch> </Router> -
在布局文件中配置路由:带参数
<Switch> <Route path="/detail/order" component={ Order }/> <Route path="/detail/:id" component={ Detail }/> </Switch> -
在布局文件中配置路由:不带参数
import Home from '@/view/Home' import Kind from '@/view/Kind' import Cart from '@/view/Cart' import User from '@/view/User' import { Route, Switch, NavLink, Redirect } from 'react-router-dom' <Switch> <Route path= '/home' component={ Home } /> <Route path= '/kind' component={ Kind } /> <Route path= '/cart' component={ Cart } /> <Route path= '/user' component={ User } /> <Redirect to ='/home' /> //重定向 </Switch> <NavLink to="/home"><NavLink> //点击跳转，如果有样式变化用NavLink //<Link to={ "/detail/id=" + item.id }><Link> //没有样式变化的跳转，用Link
注：路由的查找是从上到下的，所以path = "/"一定要放在最下面，否则就直接进入path = "/"页面，找不到path="/detail" 页面
布局文件不写具体页面，子组件数据由页面传递，所以子组件中可以用函数式组件
注：详情页跳转时path="/detail/:id"
-
重定向和404页面
import NoMatch from '@/view/NoMatch'; <Redirect exact from = '/' to ='/home' /> //exact表示只有“/”才能重定向到“/home” <Route component = { NoMatch } />
6.自定义封住组件
1.利用{...this.props}将父组件中的值传递到子组件中，在子组件中｛ ｝使用
2.结合类似vue的插槽完成自定中介部分的内容
封装Header组件
//<Header>组件
import React from 'react'
export default (props) => {
console.log(props)
const { left, right, content, onLeft, onRight } = props //从父组件中传过来的值
return (
<ul>
<li onClick = { () => {
if(props.match.path === '/home') {
return
}
props.history.goBack()
// onLeft()
}
}>
{left}
</li>
<li>{props.children? props.children : content? content : ''}</li>
<li onClick = { () => {
onRight()
}}>{right}</li>
</ul>
)
}
//父组件中引用子组件的地方
<Header
left = "返回"
content = "搜索"
right = "扫一扫"
onLeft = {() => {
// this.props.history.goBack()
console.log('返回')
}}
onRight = { () => {
console.log('扫一扫')
}}
{...this.props}
>
<div className="seach">请输入搜索的内容</div>
</Header>
7.引入移动端react ant-design-mobile UI库‘’
-
安装 ant UI库文件
cnpm i antd-mobile -S -
在index页面中引入文件(引入 Promise 的 fallback 支持 (部分安卓手机不支持 Promise))
将此段代码直接替换 <meta name="viewport" content="width=device-width, initial-scale=1" /> 替换为： <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /> <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script> <script> if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function() { FastClick.attach(document.body); }, false); } if(!window.Promise) { document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>'); } </script> -
在config/webpack.config.js中添加UI库的配置。(由于我们用到是react脚手架将config独立出来了，没有babel-plugin-文件)
npm i babel-plugin-import -D在第357行，粘贴 ["import", { libraryName: "antd-mobile", style: "css" }] // `style: true` 会加载 less 文件 -
基本配置完成，接下来需要哪个组件引入即可
7.React 状态管理器
1.Redux:(最基本的写法)
ReduX并不独属于React，他是js的状态管理容器，在vue中也能用，只是在react中用起来更好，react-redux是属于react的
在store.js页面中 -》 index.js页面引入store监听事件 -》在App页面disptch触发事件改变store中的值
//在store->index.js文件中配置状态管理器
import { creatStore } from 'redux';
const reducer = (state = {
bannerlist: [],
prolist:[]
},action) => {
const { type, data } = action;
switch (type) {
case 'CHANGE_BANNER_LIST': return Object.assign({}, state, {bannerlist:data})
case 'CHANGE_PRO_LIST': return Object.assign({}, state, { prolist: data })
default:
return state;
}
}
const store = creatStore(reducer);
export default store;
//在index.js入口文件中监听状态管理器的变化
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import store from './store'
function renderFn(){
ReactDOM.render(
<App />,
document.getElementById('root')
)
}
renderFn();
// 如果检测到状态管理器中有变化触发
store.subscribe(renderFn)
//在需要使用状态管理器数据的页面中（App.jsx）请求数据，改变状态状态管理器中的数据
import React, { Component } from 'react';
import axios from 'axios';
import store from './store'
export default class extends Component {
componentDidMount () {
axios.get('https://www.daxunxun.com/banner').then(res => {
console.log(res.data,'data');
console.log(store,'store');
store.dispatch({
type: 'CHANGE_BANNER_LIST',
data: res.data
})
})
axios.get('https://www.daxunxun.com/douban').then(res => {
store.dispatch({
type: 'CHANGE_PRO_LIST',
data: res.data
})
})
}
render () {
console.log(store.getState(),'getState')
const { bannerlist, prolist } = store.getState();
return (
<div>
<h1>状态管理器</h1>
<ul>
{
prolist.map(item => (
<li key = { item.id }>
{ item.title }
</li>
))
}
</ul>
</div>
)
}
}
2.redux + react-redux:(把一个组件拆分成了 容器组件 和 UI组件)
容器组件只负责业务逻辑的处理，
UI组件只负责数据的渲染
将App.jsx文件拆分成App.jsx和UI.jsx,前者负责写业务逻辑，后者负责渲染数据
//在index.js入口文件中改为
ReactDOM.render(
<Provider store = { store }>
<App />
</Provider>,
document.getElementById('root')
)
//在App.jsx中写业务 逻辑
import { connect } from 'react-redux'
import axios from 'axios';
import UI from './UI'
// ui组件需要的状态
const mapStateToProps = (state) => {
return {
bannerlist: state.bannerlist,
prolist: state.prolist
}
}
// ui组件的业务逻辑
const mapDispatchToProps = (dispatch) => {
return {
getBannerlist () {
axios.get('https://www.daxunxun.com/banner').then(res =>{
dispatch({
type: 'CHANGE_BANNER_LIST',
data: res.data
})
})
},
getProlist () {
axios.get('https://www.daxunxun.com/douban').then(res => {
dispatch({
type: 'CHANGE_BANNER_LIST',
data: res.data
})
})
}
}
}
const App = connect(mapStateToProps, mapDispatchToProps)(UI)
export default App;
//在UI组件中渲染数据
import React, { Component } from 'react';
export default class extends Component {
componentDidMount () {
this.props.getBannerlist();
this.props.getProlist();
}
render () {
// console.log(store.getState(),'getState')
const { bannerlist, prolist } = this.props;
return (
<div>
<h1>状态管理器</h1>
<ul>
{
prolist.map(item => (
<li key = { item.id }>
{ item.title }
</li>
))
}
</ul>
</div>
)
}
}
3.redux+ react-redux + react-thunk
将状态管理器拆分到每个页面，然后在store->index文件中配置，单独创建一个action文件，将异步请求数据单拎出来。
// action页面写异步请求
import axios from 'axios';
export default {
getBannerlist (dispatch) {
axios.get('https://www.daxunxun.com/banner').then(res => {
dispatch({
type: 'CHANGE_BANNER_LIST',
data: res.data
})
})
}
｝
//状态管理器的入口文件
import { createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import home from './home'
import kind from './kind'
const reducer = combineReducers({
home,
kind
})
// applyMiddleware 函数的作用就是对 store.dispatch 方法进行增强和改造，使得在发出 Action 和执行 Reducer 之间添加其他功能。
//引入thunk插件后，我们可以在actionCreators内部编写逻辑，处理请求结果。而不只是单纯的返回一个action对象。
const store = createStore(reducer, applyMiddleware(thunk));
export default store;
//状态管理器单个页面
const reducer = (state = {
bannerlist: [],
prolist: []
}, action) => {
const { type, data } = action;
switch (type) {
case 'CHANGE_BANNER_LIST':
return Object.assign({}, state, {bannerlist: data});
case 'CHANGE_PRO_LIST':
return Object.assign({}, state, {prolist: data});
default:
return state;
}
}
export default reducer;
8.利用脚手架创建一个React项目
1.安装脚手架并且创建项目
cnpm / npm i create-react-app -g
create-react-app myapp
使用npx直接创建项目
npx是一种在npm中安装工具，也可以被单独的下载使用
在npm 5.2.0 的时候发现会买一送一，自动安装了npx。
npx create-react-app myapp
(npm 的版本必须在5.2.0以上)
2.修改配置文件、安装依赖
运行 npm run eject 抽离配置文件
修改package.json ，配置dev指令
配置src文件夹的别名 @
cnpm i node-sass -D
cnpm i react-router-dom@4 redux react-redux redux-thunk axios antd-mobile -S
在src下面创建main.scss在首页中引入
3.配置入口文件index.js
引入路由文件 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
引入状态管理器文件 import store from './store';
配置文件 import { Provider } from 'react-redux';
全局引入组件库css文件 import 'antd-mobile/dist/antd-mobile.css';
坑点：
1.console.log()打印了2次内容
如果在render中使用console.log,由于react的生命周期中，在其初始化阶段会执行一次render初次渲染，在运行时阶段执行一次render渲染数据，所以会执行2次，也就打印了2次。
2.props提供的语法糖，可以将父组件中的所有属性复制给子组件。
{ ...this.props } 将父组件的路由信息传给组件。 this.props主要包含：history属性、location属性、match属性
3.为啥写重定向和404页面在布局文件中?
因为当我们输入网址的时候，它默认匹配“/”进入布局页面，如果你网址不对不算进入此项目，输入正确的地址后即进入项目，默认“/”进入布局页面，进入布局页面我们把它重定向到“/home”作为首页，如果输入其他匹配不到的就404页面。其他布局页面不用写，因为我们进入首页后，其他页面都是通过页面间跳转的，不需要手动在网址上输入。