万字总结记录个人React学习路程(附各个代码参考)
说在最前面
本文是本身最近再学习React的总结和记录。尽力把每一个示例代码都写了出来，尽力写的通俗易懂一些，也算是锻炼本身的讲述能力，听说给别人讲的话学的会更快，因此写下此文。html
若有错误或者其余，还望各位批评指正react
还没整理彻底，趁着没开学，我会抓紧时间学习和更新es6
5.9更新 Saga基本使用和案例
传送门 好像没用，本地均可以.........npm
更新部分函数组件的用法，提供基本思路和例子编程
JSX
简介
在JS里面写的一些标签称为JSX语法redux
基本语法
在返回的时候不须要加引号api
import React from 'react';
import ReactDOM from 'react-dom';
import logo from './logo.svg';
// 基本
const jsx = <h1>hello react</h1>
// 变量
const name = '123456'
const jsxName = <h1>{ name }</h1>
// 函数
const user = { firstName: 'tom', lastName: 'jerry' };
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const jsxFunction = <h2>{ formatName(user) }</h2>
// 对象
const greet = <p>hello, Jerry</p>
const jsxObject = <h2>{ greet }</h2>
// 三元表达式
const showTitle = true;
const title = showTitle ? <h2>{ name }</h2> : null;
const jsxOthers = (<div>{
/* 条件语句句 */
} { title }
</div>);
// 循环
const arr = [1, 2, 3].map(num => <li key={ num }>{ num } </li>)
const jsxArray = (<div> {/* 数组 */ }
<ul>{ arr }</ul>
</div>)
// 注意
const jsxAtt = (<div>
{
/* 属性：静态值⽤用双引号，动态值⽤用花括号；class、for等 要特殊处理理。
* 像class须要写成className,for须要写成htmlFor,而且属性名须要采用驼峰命名法
* */
}
<img src={ logo } style={ { width: 100 } } className="img"/></div>)
// 函数传参
function greeting(name) {
if (name) {
return <h1>Hello, {name}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}
let name2 = '测试';
const element = greeting(name2);
// 循环
let names = ['张三','李四','王五'];
let elements = [];
for(let i=0;i<names.length;i++){
elements.push(<li>{names[i]}</li>);
}
export { jsx, jsxName, jsxFunction, jsxObject, jsxOthers, jsxArray,jsxAtt,element,elements }
复制代码
组件
能够将UI切分红一些独立的、可复用的部件，数组
class 组件
class组件一般拥有状态和生命周期，继承于Component，实现 render方法浏览器
基本
import React, { Component } from 'react';
class Home extends Component {
render() {
return <h1>Hello, Class Components</h1>;
}
}
复制代码
类组件中的状态管理(秒表实例)
import React, { Component } from 'react';
class State extends Component {
// 使用state属性维护状态，在构造函数中初始化状态
constructor(props) {
super(props);
this.state = { date: new Date(), number: 0 };
// this.changeNumber = this.changeNumber.bind(this)
}
// 组件挂载时启动定时器每秒更新状态
componentDidMount() {
this.timerID = setInterval(() => {
// 使⽤用setState方法更新状态
this.setState({ date: new Date() });
}, 1000);
}
// 组件卸载时中止定时器
componentWillUnmount() {
clearInterval(this.timerID);
}
// 这里不绑定this 会报错 两种方法 第一种 用箭头函数。第二种在constructor进行绑定声明
// setState是异步执行的。执行这个结果是 log 是2不是3 证实是异步执行
changeNumber = () => {
this.setState({ number: this.state.number + 1 } )
this.setState({ number: this.state.number + 2 } )
// 这里不能进行直接修改
console.log(this.state.number)
}
// 同步改变
changeNumber2 = ()=> {
this.setState((nextState)=>{ return { number: nextState.number + 1 } } )
this.setState((nextState)=>{ return { number: nextState.number + 2 } } )
console.log(this.state.number)
// 使用定时器
// setTimeout(() => { this.setState((nextState)=>{ return { number: nextState.number + 1 } } ); console.log(this.state.counter); }, 0);
// 原生事件中修改状态
// componentDidMount(){ document.body.addEventListener('click', this.setState((nextState)=>{ return { number: nextState.number + 1 } } ), false) }
}
render() {
return (
<div> { this.state.date.toLocaleTimeString() } <p>{ this.state.number }</p> <p>setState是异步执行的</p> <button onClick={this.changeNumber}>异步改变number</button> <button onClick={this.changeNumber2}>同步改变number</button> </div>
)
}
}
复制代码
状态的设置和改变
在constructor设置状态。使用setState来改变状态。示例如上缓存
关于setState
注意，setState是 异步的！！！！
如何证实？
见示例代码中changeNumber的描述和实现
如何实现同步？
常见的有三种方法：
- 利用函数传递参数
- 使用定时器
- 直接找到DOM元素直接修改
上述三种方法在示例代码中均可以找到。
函数的this 绑定
通常有两种方法
- 在
constructor里面用bind方法绑定。例如this.changeNumber = this.changeNumber.bind(this) - 利用ES6的箭头函数。示例
changeNumber = () => { // 执行代码 }。(**缘由解释：**箭头函数默认指向定义它时，所处上下文的对象的this指向)
function组件
基本
import React from "react";
import User from "./pages/User";
function App() {
return (
<div> <User /> </div>
);
}
export default App;
复制代码
后文的 react HOOKs会作详细解释
组件通信
props通信
适用于父子组件通信
// index.js
ReactDOM.render(<App title="测试代码" />, document.querySelector('#root')); // App.js <h2>{this.props.title}</h2> // 输出为 测试代码 复制代码
Props 的只读性
官网原话 ：组件不管是使用函数声明仍是经过 class 声明，都决不能修改自身的 props
状态提高
官方解释: 一般，多个组件须要反映相同的变化数据，这时咱们建议将共享状态提高到最近的共同父组件中去。
实例代码
import React from 'react'
class Child_1 extends React.Component{
constructor(props){
super(props)
}
render(){
return (
<div> <h1>{this.props.value+'child 1'}</h1> </div>
)
}
}
class Child_2 extends React.Component{
constructor(props){
super(props)
}
render(){
return (
<div> <h1>{this.props.value+'child 2'}</h1> </div>
)
}
}
class Parent extends React.Component {
constructor(props){
super(props)
this.state = {
txt:"我是父组件"
}
this.handleChange = this.handleChange.bind(this)
}
handleChange(e){
this.setState({
txt:e.target.value
})
}
render(){
return (
<div>
<input type="text" value={this.state.txt} onChange={this.handleChange}/>
<p>{this.state.txt}</p>
<Child_1 value={this.state.txt}/>
<Child_2 value={this.state.txt}/>
</div>
)
}
}
export default Parent
复制代码
context 跨组件通信
跨层级组件之间通讯
单层传递
// ContextFather.js
import React from 'react';
import ContextChild from './child';
const Context = React.createContext()
const Provider = Context.Provider
const Consumer = Context.Consumer
const data = {
name: '我是father数据',
}
function ContextApp() {
return (
<div> <Provider value={ data }> <Consumer> { value => <ContextChild {...value}/> } </Consumer> </Provider> </div> ) } export default ContextApp // child.js import React, { Component } from 'react'; class ContextChild extends Component { constructor(props) { super(props); } render() { console.log(this.props) return (<h1>hello {this.props.name}</h1>); } } export default ContextChild 复制代码
这样能够获取到传递过来的name值
多层传递
// Context.js
import React from 'react';
const Context = React.createContext()
const Provider = Context.Provider
const Consumer = Context.Consumer
export {Provider,Consumer}
// ContextFather
import React from 'react';
import ContextChild from './child';
import {Consumer,Provider} from './Context';
const data = {
name: '我是father数据',
}
function ContextApp() {
return (
<div> <Provider value={ data }> // 这个层级不须要就不用写 Consumer <ContextChild/> </Provider> </div>
)
}
export default ContextApp
// child.js
import React, { Component } from 'react';
import ContextChild2 from './child2';
import {Consumer} from './Context';
class ContextChild extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div> <h1>我是第一层</h1> // 这里获取的是一个空值，没有数据 <h2>{this.props.name}</h2> // 这个层级须要就吧数据传递过去 <Consumer> { value => <ContextChild2 {...value}/> } </Consumer> </div> ) } } export default ContextChild // child2.js import React, { Component } from 'react'; class ContextChild2 extends Component { constructor(props) { super(props); } render() { console.log(this.props) console.log('我是第二层的') return ( <div> <h1>我是第二层的</h1> <h1>{this.props.name}</h1> </div> ); } } export default ContextChild2 复制代码
特别注意
- 不能有多个提供者，例如在每一个文件里 写上
Context.js里面的语句。则会获取不到数据。不一样的provider提供的值不一致 - 在React的官方文档中，
Context被归类为高级部分(Advanced)，属于React的高级API，但官方并不建议在稳定版的App中使用Context。不过，这并不是意味着咱们不须要关注Context。事实上，不少优秀 的React组件都经过Context来完成⾃本身的功能，好比react-redux
redux 相似Vuex
没学过Vue的能够理解为全局状态管理，即你在哪里都能访问的到（我我的是这么理解的）
知识扩展
Reducer
解释： reducer 就是一个纯函数，接收旧的 state 和 action，返回新的 state
reduce
本例子来源于MDN
const array1 = [1, 2, 3, 4];
const reducer = (total, currentValue) => total + currentValue;
// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10
// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15
复制代码
compose(没太理解)
compose就是执行一系列的任务（函数）
思考
如何输出1 2 3
function f1() { console.log("1"); }
function f2() { console.log("2"); }
function f3() { console.log("3"); }
复制代码
第一种
f1();f2();f3();
第二种
f3(f2(f1()))
第三种
function compose(...funcs) {
// funcs 是一个函数列表
if (funcs.length === 0) {
console.log('empty');
} else if (funcs.length === 1) {
return funcs[0];
} else {
return funcs.reduce(
(left, right) => (...args) => {
// console.log(args)
// console.log(right)
// console.log(left)
right(left(...args)) // 至关于 f3(f2(f1()))
}
);
}
}
compose(f1,f2,f3)()
复制代码
Redux
使用步骤
- 须要一个
store来存储数据 store里reducer初始化state并定义state修改规则- 经过
dispatch一个action来提交对数据的修改 action提交到reducer函数里，根据传入的action的type，返回新的state
实例代码
// 建立store store/ReduxStore
import { createStore } from 'redux';
// 建立数据并指定行为
const counterReducer = (state = 0, action) => {
switch (action.type) {
case 'add':
return state + 1
case 'minus':
return state - 1
default:
return state
}
}
// 建立一个store
const store = createStore(counterReducer)
export default store
复制代码
// ReduxPage
import React, { Component } from 'react';
import store from '../store/ReduxStore';
export default class ReduxPage extends Component {
componentDidMount() { // 挂在以后
store.subscribe(() => { // 执行订阅
console.log('subscribe');
this.forceUpdate(); // 从新render
//this.setState({}); // 这个也能够，内部方法也是forceUpdate
});
}
// 执行行为
add = () => {
// 派发action
store.dispatch({ type: 'add' });
};
minus = () => {
store.dispatch({ type: 'minus' });
};
stayStatic = () => {
store.dispatch({ type: 'others' });
};
render() {
console.log('store', store);
return (
<div> <h1>ReduxPage</h1> <p>获取store数据</p> <p>{ store.getState() }</p> <button onClick={ this.add }>+</button> <button onClick={ this.minus }>-</button> <button onClick={ this.stayStatic }>+-</button> </div>
);
}
}
复制代码
注意
若是点击后 数据没有更新。则是订阅状态没有改变（也就是没有render）
着重注意点
createStore建立storereducer初始化、修改状态函数getState获取状态值dispatch提交更新subscribe变更订阅
react-redux
以React的方式写来Redux
提供了两个api
Provider为后代组件提供store(相似Context)connect为组件提供数据和变动⽅方法
react-thunk
原来的只能够同步执行，安装以后，能够进行异步操做
react-logger
只能够再开发环境下使用。用来输出各个action
store
你们会发现其实仍是有 redux的引入，说明react-redux也是基于Redux
import { createStore, applyMiddleware,combineReducers } from 'redux';
import logger from 'import React, { Component } from 'react';
import { connect } from 'react-redux';
class ReactReduxPage extends Component {
render() {
const { num, add, minus,asyAdd } = this.props;
// console.log(this.props) // 本来这里面什么都没有，再进行connect映射后出现了
return (
<div>
<h1>ReactReduxPage</h1>
<p>{ num }</p>
<button onClick={ add }>+</button>
<button onClick={ minus }>-</button>
<button onClick={ asyAdd }>asyAdd</button>
</div>
);
}
}
const mapStateToProps = state => {
console.log(state)
return { num: state };
// return { num: state.counter };// 加了combineReducers 以后须要这么作 由于是一个对象
};
const mapDispatchToProps = {
add: () => {
return { type: 'add' };
},
minus: () => {
return { type: 'minus' };
},
asyAdd: ()=> dispatch =>{
setTimeout(()=>{
dispatch ({type: 'add'})
},1000)
}
};
export default connect(
mapStateToProps,//状态映射 mapStateToProps
mapDispatchToProps,//派发事件映射
)(ReactReduxPage)
';
import thunk from 'redux-thunk';
const counterReducer = (state = 0, action) => {
switch (action.type) {
case 'add':
return state + 1
case 'minus':
return state - 1
default:
return state
}
}
// const store = createStore(counterReducer)
// const store = createStore(combineReducers({counter: counterReducer}), applyMiddleware(logger, thunk))
const store = createStore(counterReducer, applyMiddleware(logger, thunk))
export default store
复制代码
applyMiddleware提供扩展中间件（有顺序，这个事先执行logger,在执行thunk）
combineReducers 命名空间,当你有多个store的时候，使用这个，就能够用对象的方式访问各个store
ReactReduxPage
import React, { Component } from 'react';
import { connect } from 'react-redux';
class ReactReduxPage extends Component {
render() {
const { num, add, minus,asyAdd } = this.props;
// console.log(this.props) // 本来这里面什么都没有，再进行connect映射后出现了
return (
<div> <h1>ReactReduxPage</h1> <p>{ num }</p> <button onClick={ add }>+</button> <button onClick={ minus }>-</button> <button onClick={ asyAdd }>asyAdd</button> </div>
);
}
}
const mapStateToProps = state => {
console.log(state)
return { num: state };
// return { num: state.counter };// 加了combineReducers 以后须要这么作 由于是一个对象
};
const mapDispatchToProps = {
add: () => {
return { type: 'add' };
},
minus: () => {
return { type: 'minus' };
},
asyAdd: ()=> dispatch =>{
setTimeout(()=>{
dispatch ({type: 'add'})
},1000)
}
};
export default connect(
mapStateToProps,//状态映射 mapStateToProps
mapDispatchToProps,//派发事件映射
)(ReactReduxPage)
复制代码
固然，若是嫌弃太乱，能够单独抽离出来放。最后导入进来就能够
组件复合
这个也是官方推荐的作法: 咱们推荐使用组合而非继承来实现组件间的代码重用。
学过Vue的同窗，我我的理解为相似于Vue的插槽
// Layout.js
import React, { Component } from 'react';
import TabBar from '../components/TabBar';
class Layout extends Component{
constructor(props) {
super(props);
}
componentDidMount() {
const {title = '首页'} = this.props
document.title = title
}
// 兼容具名和不具名 compatible
compatibleNamed(children) {
let doc = []
if (children.$$typeof) {
doc.push(children)
} else {
for (let item in children){
doc.push(children[item])
}
}
return doc
}
render() {
console.log(this.props)
return (
<div> <h1>我是布局页面</h1> {/* 不具名的使用*/} {/*{*/} {/* this.props.children*/} {/*}*/} {/* 这个是具名的使用*/} { this.props.children.btn } <h2>兼容事后</h2> {this.compatibleNamed(this.props.children).map((item,index)=>{ return ( <div key={index}> {item} </div> ) })} { this.props.showTab && <TabBar/> } </div>
)
}
}
export default Layout
// Home.js
import React, { Component } from 'react';
import Layout from '../ComponentCombination/Layout';
class Home extends Component {
render() {
return (
<DisNamed/>
)
}
}
function Named(props) {
return (
<Layout showTab={ false } title='商城首页'> <h1>我是首页</h1> </Layout>
)
}
function DisNamed() {
return (
<Layout showTab={ false } title='商城首页'> { { btn: <button>我是按钮</button> } } </Layout>
)
}
export default Home
// TabBar.js
import React, { Component } from 'react';
class TabBar extends Component{
render() {
return (
<div> <h1>我是TabBar</h1> </div>
)
}
}
export default TabBar
复制代码
不具名
上面例子容易混淆,写一个简单点的
import React, { Component } from 'react';
import TabBar from '../components/TabBar';
class Layout extends Component{
constructor(props) {
super(props);
}
render() {
console.log(this.props)
return (
<div> <h1>我是布局页面</h1> {/* 不具名的使用*/} { this.props.children } { this.props.showTab && <TabBar/> } </div>
)
}
}
export default Layout
复制代码
this.props.children所展现的是两个Layout之间的内容
例如
<Layout>
<h1>hello</h1>
</Layout>
复制代码
this.props.children展现的就是<h1>hello</h1>
具名
//Layout
import React, { Component } from 'react';
import TabBar from '../components/TabBar';
class Layout extends Component{
constructor(props) {
super(props);
}
render() {
console.log(this.props)
return (
<div> <h1>我是布局页面</h1> {/* 这个是具名的使用*/} { this.props.children.btn } { this.props.showTab && <TabBar/> } </div>
)
}
}
export default Layout
// Home.js
import React, { Component } from 'react';
import Layout from '../ComponentCombination/Layout';
class Home extends Component {
render() {
return (
<Named/>
)
}
}
function DisNamed() {
return (
<Layout showTab={ false } title='首页'> { { btn: <button>我是按钮</button> } } </Layout>
)
}
export default Home
复制代码
在传递具名组件的时候，须要用双{{}}包裹。使用的就当属性使用就能够了
差别与兼容
具名 和 不具名 的差别在于传递过来的时候this.props.children是否含有$$typeof属性。若是不含有，则是具名。反之，含有则是不具名
如何兼容？
知道了二者差别。就从差别下手
compatibleNamed(children) {
let doc = []
if (children.$$typeof) { // 若是不是具名 直接放到数组里
doc.push(children)
} else {
for (let item in children){ // 若是是具名，则便利children。把里面的内容放进数组里
doc.push(children[item])
}
}
return doc // 返回的是一个数组
}
// 使用
render(){
return (
{this.compatibleNamed(this.props.children).map((item,index)=>{
return (
<div key={index}> {item} </div>
)
})}
}
复制代码
高阶函数（柯里化）
高阶组件是一个工厂函数，它接收一个组件并返回另外一个组件。
简单例子
function Child() {
return (
<div> child </div>
)
}
// Cmp是组件 props 是组件的props
const foo = Cmp => props =>{
return (
<div style={{boder: '1px solid #ccc'}}> <Cmp {...props}/> </div> ) } function APP() { const Foo = foo(Child) return ( <div> <Foo/> </div> ) } 复制代码
修改之前Context的例子
建立 高阶组件
import { Consumer } from './Context';
import React from 'react';
//Cum 是组件 props是组件传递的props
const HOC = Cum => props => {
return (
<Consumer> { value => <Cum { ...props } { ...value }/> } </Consumer> ) } export default HOC 复制代码
原来的 Context写法
import React, { Component } from 'react';
import ContextChild2 from './child2';
import HOC from './Hoc Hooks';
import {Consumer} from './Context';
class ContextChild extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div> <h1>我是第一层</h1> <h2>{this.props.name}</h2> <Consumer> { value => <ContextChild2 {...value}/> } </Consumer> </div> ) } } export default ContextChild 复制代码
改用HOC（高阶组件）以后
// child
import React, { Component } from 'react';
import ContextChild2 from './child2';
import HOC from './Hoc Hooks';
class ContextChild extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div> <h1>我是第一层</h1> <h2>{this.props.name}</h2> {/*直接调用*/} <ContextChild2/> </div>
)
}
}
export default HOC(ContextChild)
// child2.js
import React, { Component } from 'react';
import HOC from './Hoc Hooks';
class ContextChild2 extends Component {
constructor(props) {
super(props);
}
render() {
console.log(this.props)
console.log('我是第二层的')
return (
<div> <h1>我是第二层的</h1> <h1>{this.props.name}</h1> </div>
);
}
}
export default HOC(ContextChild2)
复制代码
本来须要写Consumer如今只须要一个函数就解决了。很是方便
详细解释
可能仍是会有点迷瞪。我在详细的说一次
import { Consumer } from './Context';
import React from 'react';
const HOC = Cum => props => {
return (
<Consumer> { value => <Cum { ...props } { ...value }/> } </Consumer> ) } export default HOC 复制代码
Cum是组件，props是组件的所携带的参数,value是provider所分发的数据.
类比一下下面的.就是把组件看成了参数，经过传入一个组件，返回另外一个新的组件
<Consumer>
{
value => <ContextChild {...value}/> } </Consumer>
复制代码
彻底修改后
// ContextFather.js
import React from 'react';
import ContextChild from './child';
import {Consumer,Provider} from './Context';
const data = {
name: '我是father数据',
}
function ContextApp() {
return (
<div> <Provider value={ data }> {/*<Consumer>*/} {/* {*/} {/* value => <ContextChild {...value}/>*/} {/* }*/} {/*</Consumer>*/} <ContextChild/> </Provider> </div> ) } export default ContextApp // child.js import React, { Component } from 'react'; import ContextChild2 from './child2'; import HOC from './Hoc Hooks'; class ContextChild extends Component { constructor(props) { super(props); } render() { return ( <div> <h1>我是第一层</h1> <h2>{this.props.name}</h2> <ContextChild2/> </div> ) } } export default HOC(ContextChild) // child2.js import React, { Component } from 'react'; import HOC from './Hoc Hooks'; class ContextChild2 extends Component { constructor(props) { super(props); } render() { console.log(this.props) console.log('我是第二层的') return ( <div> <h1>我是第二层的</h1> <h1>{this.props.name}</h1> </div> ); } } export default HOC(ContextChild2) 复制代码
路由
安装
react-router包含3个库，react-router、react-router-dom和react-router-native。
react-router提供最 基本的路由功能，实际使用的时候咱们不会直接安装react-router，而是根据应用运行行的环境选择安装
react-router-dom（在浏览器器中使⽤用）
react-router-native（在rn中使用）。
react-router-dom和 react-router-native都依赖react-router，因此在安装时，react-router也会⾃自动安装
npm install --save react-router-dom
基本使用
经常使用 BrowserRouter 、连接-Link、路由-Route、独占路由Switch、重 定向路由-Redirect
// RouterPage
import React, { Component } from 'react';
import { BrowserRouter, Link, Route,Switch } from 'react-router-dom';
import HomePage from './HomePage';
import UserPage from './UserPage';
import SearchPage from './Search';
import Login from './Login';
export default class RouterPage extends Component {
render() {
return (
<div>
<h1>RouterPage</h1>
<BrowserRouter>
<nav>
<Link to="/">首页 </Link>
<Link to="/user">用户中心 </Link>
<Link to="/login">登录 </Link>
</nav>
{/* 根路路由要添加exact，实现精确匹配 不加这个可能会出现屡次渲染 */ }
<Switch>
{/*匹配到以后就不在继续往下匹配 Switch做用*/}
<Route exact path="/" component={ HomePage }/>
{/*<Route path="/user" component={ UserPage }/>*/}
<Route path="/login" component={ Login }/>
{/*404 页面 必定要放到最后*/}
<Route component={() => <h1>404</h1>} />
</Switch>
</BrowserRouter>
</div>
);
}
}
复制代码
动态路由
// RouterPage
<Link to="/search/123">详情 </Link>
<Route path="/search/:id" component={SearchPage} />
// Search
import React from 'react';
function SearchPage(props) {
console.log(props) // 有三个 match history location
return(
<div>
<p>经过这样获取到传递的参数</p>
SearchPage{props.match.params.id}
</div>
)
}
export default SearchPage
复制代码
路由守卫（重点）
案例：好比你须要在登录以后才能进入到用户页面,这时候就须要用路由守卫。
熟悉Vue的同窗应该能知道我想要表达的意思
//RouterPage
...
import RouterGuard from './RoutingGuard';
...
<Link to="/user">用户中心 </Link>
<Link to="/login">登录 </Link>
<RouterGuard path ='/user' isLogin={true} Cmp={UserPage}/>
...
复制代码
RouterGuard（重点）
// RouterGuard
import React from 'react';
import { connect } from 'react-redux';
import { Route, Redirect } from 'react-router-dom';
function RouterGuard(props) {
const { Cmp, path, isLogin, ...rest } = props
console.log(rest) // 一些剩下的参数
return (
<Route
{ ...rest }
render={ prop =>{
console.log(prop) // 一些路由的参数
return isLogin ? (<Cmp { ...prop } />) :
(<Redirect to={ { pathname: '/login', redirect:props.location.pathname} }/>
)} }
>
</Route>
)
}
export default connect(
state => {
return {
isLogin: state.user.isLogin,
}
},
)(RouterGuard)
复制代码
这里面主要是用了渲染函数 render, 还有一个三元表达式
其余页面代码
// LoginStore 记得用provider 包裹APP
import { createStore, applyMiddleware, combineReducers } from 'redux';
import logger from 'redux-logger';
import thunk from 'redux-thunk';
const initialLogin = { isLogin: false, name: null };
const userInfo = (state = {...initialLogin}, action) => {
switch (action.type) {
case 'getUser':
return { ...state,isLogin: false }
case 'LoginSuccess':
return { ...state,isLogin: true,name: '阿琛' }
case 'LoginFail':
return { ...initialLogin }
default:
return state
}
}
const store = createStore(
combineReducers({
user: userInfo
}),
applyMiddleware(logger, thunk))
export default store
// Login
import React from 'react';
import { connect } from 'react-redux';
import {Redirect} from 'react-router-dom'
function Login(props) {
const {location,login,isLogin} = props
console.log(props)
const redirect = location.redirect?location.redirect:'/'
if (isLogin){
return <Redirect to={redirect} />; } return ( <div> <h1>LoginPage</h1> <button onClick={login}>登录</button> </div> ) } export default connect(state => ({ isLogin: state.user.isLogin, }), { login: () => { return { type: 'LoginSuccess' }; }, }, )(Login) 复制代码
React全家桶
前面介绍了好多了，接下来介绍一些尚未介绍的
redux-saga
Redux-saga是Redux的一个中间件，主要集中处理react架构中的异步处理工做，被定义为generator(ES6)的形式，采用监听的形式进行工做。
做用和react-thunk差很少。都是为了解决异步
知识基础
Generato
Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函 数彻底不同，详细参考参考阮一峰老师讲解
安装
npm install --save redux-saga
案例
也是一个登录功能
// RouterPage 加上一个saga 登录
...
<Link to="/login2">Saga登录 </Link>
<Route path="/login2" component={ SagaLogin }/>
...
//SageLogin
import React,{useState} from 'react';
import { connect } from 'react-redux';
import { Redirect } from 'react-router-dom'
// 这里用的是Hooks 写起来顺手 直接用这个了
function SagaLogin(props) {
let [name,setName] = useState('')
const { location, login, isLogin, loading,error } = props
console.log(props)
const redirect = location.redirect ? location.redirect : '/'
if (isLogin) {
return <Redirect to={ redirect }/>;
}
return (
<div>
<h1>LoginPage</h1>
<p>{name}</p>
{error && <p>{error}</p>}
<input type="text" onChange={(e)=>{setName(e.target.value)}}/>
<button onClick={ () => login(name) }>
{ loading ? '登陆中...' : '登陆' }
</button>
</div>
)
}
// 这里面的就再也不解释了 再说react-thunk 解释过
export default connect(state => (
{
isLogin: state.user.isLogin,
loading: state.user.loading,
error: state.user.error,
}), {
// 这里调用Saga的login 函数，由于有事件监听。触发了loginHandle
login: name => ({ type: 'login', name }),
},
)(SagaLogin)
复制代码
重点
//Saga 这里是把逻辑分离了出来，只是为了更好维护
import { call, put, takeEvery } from 'redux-saga/effects';
// 模拟登陆接口
const UserService = {
login(name) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (name === '阿琛') {
resolve({ name: '阿琛' });
} else {
reject('用户名或密码错误');
}
}, 1000);
});
},
};
// worker saga
function* loginHandle(action) {
console.log('loginHandle');
try {
// 派发清求 到ReduxSage 使得loading为true
yield put({ type: 'requestLogin' });
// 执行回调函数。获取结果
const res = yield call(UserService.login, action.name);
// 把结果派发回去
yield put({ type: 'requestSuccess', res });
} catch (err) {
yield put({ type: 'requestFailure', err });
}
}
// watcher saga 事件监听 监听login事件
function* mySaga() {
yield takeEvery('login', loginHandle);
}
export default mySaga;
// ReduxSage
import { createStore, combineReducers, applyMiddleware } from 'redux';
import mySaga from './Saga';
import createSagaMiddleware from "redux-saga";
// 建立一个中间件
const sagaMiddleware = createSagaMiddleware();
// 初始化状态
const initialLogin = { isLogin: false, loading: false, name: '', error: '' };
// 定义Reducer
// 注意 必须又default 从action 里面拿到传递过来的参数
function loginReducer(state = { ...initialLogin }, action) {
switch (action.type) {
case 'requestLogin':
return { ...initialLogin, loading: true };
case 'requestSuccess':
return { ...state, isLogin: true, loading: false,name: action.name };
case 'requestFailure':
console.log(action)
return {...state,error: action.err}
default:
return state;
}
}
const store = createStore(combineReducers(
{ user: loginReducer }
),
// applyMiddleware(thunk)
applyMiddleware(sagaMiddleware)
);
// 记得运行一下
sagaMiddleware.run(mySaga)
// 若是按看上面的例子了话，记得换一下store 再index.js 里用provider 来传递store
export default store;
复制代码
如下的尚未学习或者整理，最近几天会抓紧时间整理出来
Dva
Umi
mobx
生命周期（暂无整理）
React HOOKs
整理不全，正在抓紧
Hook 是 React 16.8 的新增特性。它可让你在不编写 class 的状况下使用 state 以及其余的 React 特性
解决问题
- 在组件之间复用状态逻辑很难,可能要用到render props和高阶组件，React 须要为共享状态逻辑提供更好的原生途径，Hook 使你在无需修改组件结构的状况下复用状态逻辑
- 复杂组件变得难以理解，Hook 将组件中相互关联的部分拆分红更小的函数（好比设置订阅或请求数据）
- 难以理解的 class,包括难以捉摸的
this
注意事项
- 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
- 只能在 React 的函数组件中调用 Hook。不要在其余 JavaScript 函数中调用
useState
- useState 会返回一对值：当前状态和它的函数，你能够在事件处理函数中或其余一些地方调用这个函数。它相似 class 组件的 this.setState，可是它不会把新的 state 和旧的 state 进行合并
- useState 惟一的参数就是初始 state
计数器简单实例
import React,{useState} from 'react';
function Counter() {
// useState会返回两个，一个是当前值。一个是改变它的函数
let [state,setState] = useState({num: 0})
let [num,setNum] = useState(0)
// 两种方式 看我的喜爱
return (
<div> <p>{state.num}</p> <p>{num}</p> <button onClick={()=>{setState({num: state.num +1})}}>+</button> <button onClick={()=>{setNum(num + 1)}}>+</button> </div>
)
}
复制代码
每次渲染都是独立的闭包
- 每一次渲染都有它本身的 Props and State
- 每一次渲染都有它本身的事件处理函数
- alert会“捕获”我点击按钮时候的状态。
// alter 捕得到是点击时候得状态
function Counter2 () {
// useState 返回两个，一个是当前状态的属性，一个是修改状态的方法。
let [state, setState] = useState({num: 0})
let changeLater = ()=>{ // 这个alter 会捕获当前得状态。即点击按钮时候得状态
setTimeout(()=>{
alert(state.num)
}, 2000)
}
return (
<div> <p>{ state.num }</p> <button onClick={ () => setState({num: state.num+1}) }>+</button> <button onClick={ changeLater }>changeLater</button> </div>
)
}
复制代码
函数式更新（解决上例的方法）
// 改变状态注意
function Counter3 () {
// useState 返回两个，一个是当前状态的属性，一个是修改状态的方法。
let [state, setState] = useState({num: 0})
let lazyAdd = ()=>{ // 这个alter 会捕获 当前得状态。即点击按钮时候得状态
setTimeout(()=>{
setState({num: state.num+1})
}, 2000)
}
let lazyAdd2 = ()=>{ // 这个alter 会捕获以后的状态。
setTimeout(()=>{
setState((state) => ({num: state.num+1}))
}, 1000)
}
return (
<div> <p>{ state.num }</p> <button onClick={ () => setState({num: state.num+1}) }>+</button> <button onClick={ lazyAdd }>lazyAdd</button> <p>若是这样写得话，会获取到点击时候得状态在进行改变</p> <button onClick={ lazyAdd2 }>lazyAdd2</button> <p>这样写，改变了整个state，就能够正常相加了</p> </div>
)
}
复制代码
若是新的 state 须要经过使用先前的 state 计算得出，那么能够将函数传递给 setState。该函数将接收先前的 state，并返回一个更新后的值
惰性state
- initialState 参数只会在组件的初始渲染中起做用，后续渲染时会被忽略
- 若是初始 state 须要经过复杂计算得到，则能够传入一个函数，在函数中计算并返回初始的 state，此函数只在初始渲染时被调用
// 惰性state
// initialState 初始状态参数只会在组件初始渲染得时候调用，后续被忽略
// 且不会本身整合state，须要本身整合
function Counter4 () {
let [state, setState] = useState(function () {
console.log(' 初始化')
return {num: 0, name:'计算器'}
})
return (
<div> <p>{state.num}</p> <button onClick={ () => setState({num: state.num+1}) }>+</button> <p>只会输出一次log</p> <p>React.StrictMode 模式下会输出两次log</p> <p>这是展现他不会整合state</p> <p>{ state.name }:{state.num}</p> <p>若是点击上面得button，则name会消失,下面这个则不会</p> <button onClick={ () => setState({...state, num: state.num+1}) }>+</button> </div>
)
}
复制代码
按第一个button 计算器消失的缘由: setState不会本身整合State，须要咱们本身手动进行整合
性能优化
Object.is
MDN,使用Object.is比较。
function Counter5 () {
let [state, setState] = useState(function () {
return {num: 0, name:'计算器'}
})
console.log('当state发生改变得时候，会从新得渲染这个函数，则会继续得输出')
console.log('Render5 ')
return (
<div> <p>{state.num}</p> <button onClick={ () => setState({...state, num: state.num+1}) }>输出+</button> <p>点击这个不会输出 Render5</p> <button onClick={ () => setState(state) }>不输出+</button> <p>缘由，内部当发现这个state没有发生改变得时候，将再也不会渲染这个</p> </div>
)
}
复制代码
作缓存 CallBack
缓存函数
let lastClick;
let lastClick2;
function Counter7(callback, deps) {
let [state, setState] = useState({num: 0})
const contralAdd = ()=> setState({num: state.num+1})
console.log(lastClick === contralAdd)
lastClick = contralAdd // 一直输出false 证实不是同一个函数
/**********************************************************************************/
const contralAdd2 = useCallback(
()=> setState({num: state.num+1}), []
// 这个数组称之为依赖数组，里面放属性，属性发生变化，他就从新渲染
// 若是不写 state.num 那点击下面得按钮只会变化一次。
// 若是写了得话，则会每次改变都会从新渲染
)
console.log(lastClick2 === contralAdd2)
lastClick2 = contralAdd2 // 一直输出true 证实是同一个函数
return (
<div> <p>{state.num}</p> <button onClick={ contralAdd }>+</button> <p>这样得话每次会生成一个新得函数，性能会变低</p> <button onClick={ contralAdd2 }>+</button> <p>这样得话更具log显示，得出是一个函数，提升性能</p> </div>
)
}
复制代码
三种结果
- 若是点击上面的 加号 log输出
lastClick === contralAdd false
lastClick2 === contralAdd2 true
复制代码
缘由：state.num 发生了改变，从新渲染了 Counter。因此第一个输出false。 第二个由于加了useCallback，依赖数组里面没有添加属性，致使，因此程序认为他没有发生改变，因此输出 true
-
若是点击下面的 + 号 log输出
lastClick === contralAdd false lastClick2 === contralAdd2 true 复制代码它一样会输出这个，缘由，若是不写依赖属性，那点击下面得按钮只会变化一次。而数值变化了。因此第一个为true 第二个为false，而且再点击这个按钮不会再发生变化
(说的有点不许确，准确来讲是发生变化了，由于闭包的缘由，致使第二个函数的
state.num一直指向初始化的0 因此才没有改变) -
添加依赖属性以后。输出结果
lastClick === contralAdd false lastClick2 === contralAdd2 false 复制代码这个不用多说了，依赖属性发生了改变。致使两个函数都从新渲染
memo
纯函数，作优化，或者叫缓存，缓存组件
import React,{memo,useMemo,useState} from 'react';
function Child() {
console.log('我是Child')
return (
<h2>我是child</h2>
)
}
function Child2(props) {
console.log('render child2')
console.log(props)
return (
<p>我是Child2{props.name}</p>
)
}
Child = memo(Child)
Child2 = memo(Child2)
function MemoApp() {
let [state,setState] = useState({num: 0})
let [name, setName] = useState('测试')
return(
<div>
<p>{state.num}</p>
<button onClick={()=>{setState({num: state.num +1 })}}>+</button>
<br/>
<input type="text" value={name} onChange={(e)=>{setName(e.target.value)}}/>
<Child/>
<Child2 name={name}/>
</div>
)
}
export { MemoApp }
复制代码
若是不加上memo,则只要点击 + 号，Child就会发生渲染。
通俗解释：只要上次渲染结果和此次相同。就不会渲染，不然渲染
useMemo
也是作缓存用的。缓存数据
let lastData
function UseMemoApp() {
let [state, setState] = useState(0)
let [name, setName] = useState('测试')
const data = state
const data2 = useMemo(() => (state), []);
console.log('data===oldData ', data === lastData);
const addClick = useCallback(() => setState(state + 1), [state])
lastData = data;
return(
<div> <p>{state}</p> <p>{data2.state}</p> <button onClick={addClick}>+</button> <p>改变input的值，输出true 证实数据作了缓存</p> <input type="text" value={name} onChange={(e)=>{setName(e.target.value)}}/> </div> ) } 复制代码
上面那个userCallback能够无视，我就是作了一个缓存。重点关注两个data
改变了input内的值以后，log 输出true，证实数据缓存成功,数据发生改变，输出false
useReducer
- useState 的替代方案。它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法
- 在某些场景下，useReducer 会比 useState 更适用，例如 state 逻辑较复杂且包含多个子值，或者下一个 state 依赖于以前的 state 等
例子，计数器
import React, { useReducer } from 'react';
// 初始化状态
const initialState = 0;
// 初始一个reducer state 状态 action 派发状态
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { number: state.num + 1 };
case 'decrement':
return { number: state.num - 1 };
default:
throw new Error();
}
}
// 把数据变成 对象
function init(initialState) {
return { num: initialState }
}
function ReducerCounter() {
const [state, dispatch] = useReducer(reducer, initialState, init);
return (
<> Count: { state.num } <p></p> <button onClick={ () => dispatch({ type: 'increment' }) }>+</button> <button onClick={ () => dispatch({ type: 'decrement' }) }>-</button> </> ) } export { ReducerCounter } 复制代码
利用useReducer 写一个useState
自定义hooks
若是函数的名字以 use 开头，而且调用了其余的 Hook，则就称其为一个自定义 Hook。
这里只作一个简单解释。后面会详细介绍
function useStateSelf(initState) {
function init(initialState){
return {number:initialState};
}
// userCallback 作缓存
const reducer = useCallback((state,action) => {
console.log(action)// 看log 输出判断 返回值
console.log(state)
return action.payload // 加{} 须要 写 action.payload
// return payload// 不加{}直接写action
})
let [state,dispatch] = useReducer(reducer, initState,init)
console.log(dispatch)
function setState(payload) {
console.log(payload) // 整个对象 {number : x}
dispatch({payload})
// dispatch(payload)
}
return [state,setState]
}
// 调用
const [state, setState] = useStateSelf(initialState);
return(
<div> <p>自定义hooks</p> <p>{state.number}</p> <button onClick={() => setState({number: state.number + 1 })}>+</button> <button onClick={() => setState({number: state.number - 1 })}>-</button> </div>
)
复制代码
思路分析，首先参照useState的使用，须要传入一个状态（本例子只考虑数值，没考虑对象）。返回一个数组，状态和改变状态的函数.
暂未更新完毕。会咱2天内更新完毕
相关文章
- 1. 记录个人LINUX学习之路
- 2. java学习之路个人总结二
- 3. java学习之路个人总结三
- 4. 个人附录代码清单生成
- 5. 个人Python学习记录
- 6. Blender个人学习记录
- 7. [Blender]个人学习记录
- 8. Tornado个人学习记录
- 9. 个人总结/个人练习代码库/Binder连接
- 10. 个人react学习
- 更多相关文章...
- • 第一个MyBatis程序 - MyBatis教程
- • 第一个Hibernate程序 - Hibernate教程
- • Tomcat学习笔记（史上最全tomcat学习笔记）
- • 适用于PHP初学者的学习线路和建议
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 在windows下的虚拟机中,安装华为电脑的deepin操作系统
- 2. 强烈推荐款下载不限速解析神器
- 3. 【区块链技术】孙宇晨：区块链技术带来金融服务的信任变革
- 4. 搜索引起的链接分析-计算网页的重要性
- 5. TiDB x 微众银行 | 耗时降低 58%，分布式架构助力实现普惠金融
- 6. 《数字孪生体技术白皮书》重磅发布（附完整版下载）
- 7. 双十一“避坑”指南：区块链电子合同为电商交易保驾护航！
- 8. 区块链产业，怎样“链”住未来？
- 9. OpenglRipper使用教程
- 10. springcloud请求一次好用一次不好用zuul Name or service not known
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 记录个人LINUX学习之路
- 2. java学习之路个人总结二
- 3. java学习之路个人总结三
- 4. 个人附录代码清单生成
- 5. 个人Python学习记录
- 6. Blender个人学习记录
- 7. [Blender]个人学习记录
- 8. Tornado个人学习记录
- 9. 个人总结/个人练习代码库/Binder连接
- 10. 个人react学习