react学习一篇就够了

webstrom自动格式化代码

js框架 MVC

安装

npm install create-react-app -g

生成项目(项目名npm发包包命名规范 /^[a-z0-9_-]$/)

create-react-app 项目名字

查看全局安装目录

npm root -g

public 存放的是当前项目的HTML页面(单页面应用放index.html即可)

html 导入的地址应该写成绝对路径  %PUBLIC_URL%   public的文件夹

	不能用相对路径

src  项目结构最主要的目录,后期的js,路由组件都放这里

	 index.js 是当前目录的入口文件

react-scripts 是webpack的所有配置

  "scripts": {

    "start": "react-scripts start",

    "build": "react-scripts build",

    "test": "react-scripts test",

    "eject": "react-scripts eject"

  }

  执行命令 npm run start /yarn start

React脚手架的深入剖析

暴露webpack配置项

为了结构的美化,把所有的webpack配置等都隐藏到了node_modules中(react-script)

yarn eject

首先会提示确认是否执行eject操作,操作是不可逆转的,一旦暴露出来配置项,就无法再隐藏回去了

报错信息

Remove untracked files, stash or commit any changes, and try again.

如果当前的项目基于git管理,在执行eject的时候,如果还没有提交到历史区内容,需要先提交历史区,然后再eject才可以,否则报错

* 需要在vcs 里面commit 进行git操作

再进行 yarn eject

之后多个两个文件夹

config  存放的是webpack的配置文件

	webpack.config.dev.js 开发环境下的配置项(yarn start)

	webpack.config.prod.js 生产环境下的配置项(yarn build)

scripts   存放的是可执行脚本的js文件

	start.js  yarn start执行的就是这个js

	build.js  yarn  build 执行的就是这个就是

配置less

yarn add less less-loader

less 开发和生产都需要改

参考

https://www.cnblogs.com/esofar/p/9631657.html

https://www.cnblogs.com/jayxiangnan/p/9116663.html

set HTTPS=true&&npm start  开启HTTPS协议模式

set PORT=63341  修改端口号

配置sass

 yarn add node-sass sass-loader -D

如果yarn不能安装就用cnpm

less类似一样的

    {

                  test:/\.scss$/,

                  loaders:['style-loader','css-loader','sass-loader'],

              },

 npm install less less-loader --save-dev

去掉webstorm 报灰色线

撤销工作区的修改

已修改，未暂存（撤销工作区的修改）

git reset --hard

react & react-dom

渐进式框架

我们应该把框架的功能进行拆分,用户想用什么,让其自己自由组合即可

全家桶

渐进式框架N多部分的组合

VUE全局桶(vue-cli/vue/vue-router/vuex/axios(fetch)/vue element(vant))

REACT全家桶: create-react-app/react/react-dom/react-router/redux/react-redux/axios/ant/sage/mobx

react:REACT框架的核心部分,提供了Component类可以共我们进行组件开发,提供了钩子函数(生命周期函数)

所有的生命周期函数都是基于回调函数完成的

react-dom :把JSX语法(REACT特有的语法)渲染为真实DOM(能够展示的结构都叫真实的DOM)

* 不推荐jsx的容器是body

* 只能出现一个根元素

* 给元素设置样式类用的是className而不是class

* style={{}}

* jsx元素设置属性 ,属性值对应大括号中 对象,函数都可以放(也可以放js表达式)

将数据嵌入jsx中,可以嵌入变量或者直接的数据值

let name='xxx';

ReactDOM.render(<div>

                <h1>{name}</h1>

                <h2>{'haha'}</h2>

                </div>)

不能嵌入对象(代指: {} /^$/ 日期对象 函数  数据中的某一项是前面也不行)

可以嵌入基本类型值(null/undefined/布尔值都是空元素,也就是不显示任何内容)

把JSX(虚拟DOM) 变为真实的DOM(不太理解)--(8,9)

循环创建jsx元素需要设置标识key,并且在当前循环的时候,这个key需要唯一

let name='珠峰培训',

    data=[{id:1,title:'xxx'},{id:2, title: 'xxx'}];

ReactDOM.render(<ul style={{color:'red'}} className={'box clearfix'} OnClick={(ev)=>{

    console.log(ev);

}}>

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

        return <li key={index}>

            {item.id}

            {item.title}

        </li>

    })}

</ul>,root);

使用三元运算符解决判断操作(if和swich是不可以的)

React是如何把jsx元素转换为真实的DOM元素并且添加到页面中

React 组件

组件/模块管理 ,就是把一个程序划分为一个个组件来单独处理

优势

• 有助于多人协助开发
• 提高复用性

React创建组件有两种方式

• 函数声明式组件
• 基于继承component类来创建组件

src->component 这个文件夹存放开发的组件

create-element 在处理的时候,遇到一个组件,返回的对象中type就不再是字符串,而是一个函数(类),但是属性还是props中

({

    type:Dialog,

    props:{

        lx:1,

        con:'xxx',

        children:一个值或者一个数组

    }

}

首先判断type是什么类型,如果是字符串就创建一个元素标签,如果函数或者类,就把函数执行,把props中的每一项(包含children传递给函数)

React.Children.map

基于继承component类创建组件

基于create-element 把jax 转换为一个对象,当react渲染这个对象的时候,遇到type是一个函数或者类,不是直接创建元素,而是先把方法执行:

	* 如果是函数式声明的组件,就把它当作普通方法执行(方法中的this是undefiend),把函数返回的jsx元素进行渲染

	* 如果是类声明式的组件,会把房钱类new它执行,创建类的一个实例(当前本次调用组件就是它的实例)执行constructor之后,会执行this.render(),把render中返回的jsx拿过来渲染,所以 类声明式组件,必须有一个render的方法,方法中需要一个jsx元素

	但是不管是哪一种方式,最后都会拿解析出来的props属性对象作为实参给对应的函数或者类

创建组件有两种方式"函数式","创建类式"

yarn add prop-types

基于这个插件我们可以给组件传递的属性设置规则

设置的规则不会影响页面的,但是会控制台报错

生命周期函数(钩子函数)

• 描述一个组件或者程序从创建到销毁的过程,我们可以再过程中基于钩子函数完成一些自己的操作

• 生命周期

• 基本流程
  
  constructor 创建一个组件
  
  componentWillMout  第一次渲染之前
  
  render 第一次渲染
  
  componentDidMout 第一次渲染之后
  
  修改流程:当组件的状态数据发生改变(setState)或者传递给组件的属性发生改变
  
  shouldComponentUpdate 是否允许组件重新渲染(允许则执行后面函数,不允许直接结束即可)
  
  componentWillUpdate 重新熏染之前
  
  render 第二次以后重新渲染
  
  componentDidUpdate 重新渲染之后
  
  属性改变:
  
  componentWillReceiveProps(nextProps/nextState):父组件把传递给组组建的属性发生改变后出发的钩子函数
  
  接受最新属性之前,基于this.props.xxx 获取的是原有的属性信息,nextProps存储的是最新传递的属性信息
  
  shouldComponentUpdate
  
  	是否允许组件更新, 返回true是允许,返回false 是不在继续走
  
  	componentWillUpdate:
  
  	更新之前: 和should一样,方法中通过this.state.xxx 获取的还是更新前的状态信息,方法有两个参数:nextProps/nextState存储的是最新的属性和状态
  
  	render 更新
  
  	componentDidUpdate  更新之后
  
  卸载
  
  componentWillUnmount :卸载组件之前(一般不用)
  
  

复合组件

1. 复合组件:父组件嵌套子组件

属性VS 上下文

1. 属性操作起来简单,子组件是被动接受传递的值(组件内的属性是只读的),只能父传子(子传父不行,父传孙也需要处理:子传子,子再传孙)

2. 上下文操作起来相对复杂一些,子组件是主动获取信息使用的(子组件是可以修改获取的上下文信息,但是不会影响到父组件中的信息,其他组件不受影响),一旦父组件设置了上下文信息,他后代组件都可以直接拿到,不需要不层层的传递

其实子组件也能修改父组件中的信息

1. 利用回调函数机制: 父组件把一个函数通过属性或者上下文的方式传递给子组件,子组件要把这个方法执行即可

   (也就是子组件中执行了父组件方法,还可以传递一些值过去),这样组件在这个方法中,想把自己的信息改成啥就改成啥

  /*  在父组件中

         设置子组件上下文属性类型

         static childContextTypes={}

         获取子组件的上下文(设置子组件的上下文属性信息)

         getChildContext(){}

         */

    static childContextTypes = {

        n: PropTypes.number,

        m: PropTypes.number,

        callBack: PropTypes.func

    };

	getChildContext() {

        //return 是啥就是想当于给子组件设置下上文

        //只要render重新渲染,就会执行这个方法,重新更新父组件中的上下文信息,如果父组件上下文

        //信息更改了,子组件在重新调取的时候,会使用最新的上下文信息(render=>context=>子组件调取渲染)

        let {n, m} = this.state;

        return {

            n,

            m,

            callBack: this.updateContext

        }

    }

   updateContext = type => {

        //type :'support'/'against'

        if (type === 'support') {

            this.setState({n: this.state.n + 1});

            return;

        }

        return this.setState({m:this.state.m-1})

    };

//子组件

 <button className={'btn btn-danger'} onClick={

                ()=>{

                    callBack('against');

                }

            }>反对</button>

1. 平行组件:兄弟组件或者毫无关系的两个组件

//Vote.js

import React from 'react';

import PropTypes from 'prop-types';

import VoteHead from './VoteHead';

import VoteBody from './VoteBody';

import VoteFooter from "./VoteFooter";

export default class Vote extends React.Component {

    static defaultProps = {

        title: '',

        count: {

            n: 0,

            m: 0,

        }

    };

    constructor(props) {

        super(props);

    };

    render() {

        let {store} = this.props;

        return <section className={'panel-heading'} style={{width: '50%', height: '20px auto'}}>

            <VoteHead title={this.props.title}/>

            <VoteBody store={store}/>

            <VoteFooter store={store}/>

        </section>

    }

}

//VoteBody.js

import React from 'react';

import PropTypes from 'prop-types';

export default class VoteBody extends React.Component {

    constructor(props) {

        super(props);

        //init state

        let {store: {getState}} = this.props,

            {n, m} = getState();

        this.state = {n, m};

    }

    componentDidMount() {

        let {store: {getState, subscribe}} = this.props;

        let unsubscribe = subscribe(() => {

            let {n, m} = getState();

            this.setState({

                n,

                m

            })

        });

        //unsubscribe(): 当前追加的方法移出,接触绑定的方式

    }

    render() {

        let {n, m} = this.state,

            rate = (n / (n + m)) * 100;

        if (isNaN(rate)) {

            rate = 0;

        }

        return <div className={'panel-body'}>

            支持人数: <span>{n}</span>

            <br/>

            反对人数: <span>{m}</span>

            <br/>

            支持比率: <span>{rate.toFixed(2) + '%'}</span>

        </div>;

    }

}

//VoteFooter.js

import React from 'react';

import PropTypes from 'prop-types';

export default class VoteFooter extends React.Component {

    constructor(props, context) {

        super(props, context);

    }

    render() {

        let {store: {dispatch}} = this.props;

        return <div className={'panel-footer'}>

            <button className={'btn btn-success'}

                    onClick={() => {

                        dispatch({

                            type: 'VOTE_SUPPORT'

                        })

                    }}

            >支持

            </button>

            &nbsp;&nbsp;

            <button className={'btn btn-danger'} onClick={

                () => {

                    dispatch({

                        type: 'VOTE_AGAINST'

                    })

                }

            }>反对

            </button>

        </div>

    }

}

Redux

redux:进行状态统一管理的类库(适用于任何技术体系的项目)

• 只要两个或者多个组件之间想要实现信息的共享,都可以基于redux解决,把共享的信息到redux容器中进行管理
• 还可以使用redux做临时存储:页面加载的时候,把从服务器获取的数据信息存储到redux中,组件渲染需要的数据,redux中,这样只要页面不刷新,路由切换的时候,再次渲染组件不需要重新从服务器拉取数据,直接从redux中获取即可:页面刷新,从头开始(这套方案代替了localStorage本地存储来实现数据缓存)

Redex管理文件夹

store REDUX管理文件夹

 *   action 派发行为集合

 *          vote.js

 *          ...

 *          index.js 所有分模块行为的汇总

 *

 *   reducer 管理员集合

 *          vote.js

 *          ...

 *          index.js 所有管理员的集合汇总

 *

 *   action-types.js 所有行为标识

 *   index.js 创建REDUX容器

Redex工程化案例

react-redux

• 当前整个项目都在Provider组件下,作用就是把创建的store可以供内部组件使用(基于上下文)
• Provider 组件中只允许出现一个组件
• 把创建的store基于属性传递给Provider(这样后代组件中都可以使用这个store)

• 相对传统的redux,我们做的步骤优化

• 导出的不在是我们创建的组件,而是基于connect构造后的高阶组件

```js

 export default connect([mapStateToProps],[mapDispatchToProps])(自己创建的组件)

```

    ////把redux容器中的状态信息遍历,赋值给当前组件的属性(state)

    let mapStateToProps=state=>{

        //state就是redux容器中状态信息

        //我们返回的是啥,就把它挂载到当前组件的属性上(redux存储很多信息,我们想用啥就返回啥即可)

        return {

            ...state.vote

        }

    };

    //把redux的dispatch 派发行为遍历,也复制给组件的属性(ActionCreator)

    let mapDispatchToProps=dispatch=>{

        //dispatch:store中存储的dispatch方法

        //返回的是啥,就想当于把啥挂载到组件的属性上(一般我们挂载一些方法,这

        // 些方法完成dispatch派发信息

        return {

            init(initData) {

                dispatch(action.vote.init(initData));

            }

        }

    };

    export default connect([mapStateToProps],[mapDispatchToProps])(VoteBase)

    =======================

    export default connect({state=>({...state.vote})},action.vote)(VoteBase)

    react-redux把action-creator中编写方法(返回action对象的方法),自动构造dispatch派发任务的方法,也就是mapDispatchToProps这种格式把redux容器中的状态信息遍历,赋值给当前组件的属性(state)

[todo](file:\H:\珠峰\2018年第二期源码、笔记\2018年第二期源码、笔记\WEEK12\day2)实例

单页面应用(SPA)多页面应用(MPA)

• 多页面应用(MPA)

• 单页面应用(SPA)

• 如何实现单页面应用

路由

yarn add react-router-dom

BrowerRouter

HashRouter

Link

NavLink

with-Router

Redirect

qs

OA和ERP

OA:企业办公管理系统(偏向于有助于日常办公)

ERP: 企业战略资源管理系统(偏向于有管理思想)

• 钉钉
• TAPD
• 今目标
• 纷享销客

CRM:客户管理系统

CMS:内容管理系统(内容分发平台)

IM:即时通信系统

redux中间件

redux-logger:能够在控制台清晰的展示当前redux操作的流程和信息(原有状态,派发信息,修改后的状态)

redux-thunk: 处理异步的dispatch派发

redux-promise: 在dispatch派发的时候支持promise操作

yarn add redux-logger redux-thunk redux-promise

store/index.js

=====

import {createStore, applyMiddleware} from 'redux';//applyMiddleware导入中间件

import reduxLogger from 'redux-logger';

import reduxThunk from 'redux-thunk';

import reduxPromise from 'redux-promise';

import reducer from './reducer';

let store = createStore(reducer, applyMiddleware(reduxLogger, reduxThunk, reduxPromise));

export default store;

    //=>PROMISE中间件的语法

    create(payload) {

        return {

            type: TYPES.CUSTOM_CREATE,

            //=>传递给REDUCER的PAYLOAD需要等待PROMISE成功，把成功的结果传递过去

            payload: new Promise(resolve => {

                setTimeout(() => {

                    resolve(payload);

                }, 3000);

            })

        }

    }

 create(payload) {

        //=>THUNK中间件的使用语法：在指定执行派发任务的时候，等待3000MS后在派发

        return dispatch => {

            //=>DISPATCH都传递给我们了，我们想什么时候派发，自己搞定即可

            setTimeout(() => {

                dispatch({

                    type: TYPES.CUSTOM_CREATE,

                    payload

                });

            }, 3000);

        };

    }

[路由问号传参案例](file:\H:\珠峰\2018年第二期源码、笔记\2018年第二期源码、笔记\WEEK12\day3\src)

Ant Desion UI框架

复习

{React.createElement('a',{href:'http://www.baidu.com'},'Hello')}

//标签  属性   子元素

class HelloMessage extends Component{

    render(){

        let child=React.createElement('li',{className:'ddd'},'我是子页面');

        return <div>Hello {this.props.name}

            {React.createElement('a',{href:'http://www.baidu.com'},'Hello')}

            <br/>

            {React.createElement('ul',{className:'ccc'},child

                )}

        </div>

    }

}

style 属性应该由CSS属性构成的JS对象

* className=''

* style={{fontSize:50,backgroundColor:'red'}}   // zIndex  多峰命名

let styles={

        fontSize:50,

        fontWeight: 'bold',

        backgroundColor: 'red',

      };

{{styles}}

模拟 if

{this.state.tags.length === 0 && '等于0'}     //A为真返回B

   renderTags(){

      if(this.state.tags.length===0) return <p>里面没有元素</p>

      return  <ul>

        {this.state.tags.map((tag,index)=><li key={index}>{tag}</li>)}

        <hr />

      </ul>

    }

{this.renderTags()}

props 属性

state  组件的状态  可以通过 this.setState进行更改

无状态组件

const Hellos = (props) => <div>Hello {props.name}</div>;

<Hellos name={'zhangsan'}/>

有状态组件

//定义一个时间的方法,挂载前开始定时器执行这个方法,卸载后清除挂载前的那个定时器方法

export default class LikeButton extends React.Component {

    constructor(props) {

        super(props);

        //初始化状态

        this.state = {

            data: new Date()

        }

    };

    componentDidMount(){

        this.timerId=setInterval(

            ()=>this.tick()

        )

    }

    //方法

    tick(){

        this.setState({

            data:new Date()

        })

    }

    componentWillUnmount(){

        clearInterval(this.timerId);

    }

    render() {

        return <div>

            <h3>{this.state.data.toLocaleTimeString()}</h3>

        </div>

    }

}

props 对于使用他的组件来说是只读的,只能通过父组件进行修改

state  可以通过 this.setState({  }) 进行修改

注意不要在push pop shift unshift  splice 等方法修改

应该用concat  slice   filter  会放回一个新数组

原生事件

可以再componentDidMount方法中通过addEventListener 绑定浏览器原生事件

componentWillUnmount 方法解除 removeEventListener

在dom 中 设置 ref属性指定一个名称    通过 this.refs.指定名称获取

组合组件

父组件 <Avatar username="pwh" />

const Avatar = (props) => {

  return (

    <div>

      //子组件   通过属性传递

      <ProfilePic username={props.username} />

      <ProfileLink username={props.username} />

    </div>

  );

}

循环的时候必须要给key

// arr是在父组件里面声明的arr数组的属性

<ul>{this.props.arr.map((v,i)=>{

                return <li key={i}>{v}</li>

            })}</ul>

组件标签里面包含的子元素通过 this.props.children

<LikeButton username={'pwh'} arr={[1,2,3,4]}>

        <span>12123</span>

        <p>我是一个p标签</p>

    </LikeButton>

props.children通常是一个组件对象的数组,当 props.children是唯一的子元素,那就不是数组

点击事件的内联样式

onClick={  ()=>(console.log(1))}

第二种方法

onClick={this.handleClick}  //记得不要再这里带(e)参数 会报错的

<div onClick={this.handleClick.bind(this)}>${this.props.name}</div>

handleClick=(e)=>{

        console.log(e.target.innerHTML);

    };   //函数建议使用箭头函数的写法

通过  setState来修改state

this.setState({

      count: this.state.count+1

    })

学习redux

我们大多数人的学习过程一般是——一个循序渐进、逐步迭代的过程，而redux的学习却不是这样，你不看概念，就没法理解示例demo，你不敲示例demo，你就无法完全理解redux的各种基础概念。所以最终发现，redux的最好的学习方式就是，通读一个个的概念，敲出示例demo，再根据示例demo，反过来理解概念，循环往复，总能学的懂！！

const todo={

    TOGGLE_TODO:'TOGGLE_TODO',

    GET_TODOS:'GET_TODOS',

    toggleTodo({ items,id }) {

        return {

            type: todo.TOGGLE_TODO,

            items:items,

            id:id

        }

    },

    getTodos({items}){

        return {

            type:todo.GET_TODOS,

            items:items

        }

    }

};

export default todo;

// ======

export default function(state = {默认值}, action) {

    switch(action.type){

        case GET_TODOS:

            return {todos:[...action.items]}

        case TOGGLE_TODO://deleted=true

            return {

                todos:action.items.map((i)=>{

                    if(i.id===action.id){

                        return {

                            ...i,

                            status:i.status===0?1:0

                        }

                    }else{

                        return {

                            ...i

                        }

                    }

                })

            }

        default:

            return state;

    }

}

const store = createStore(todo);

redux-hook

dva.js

import React from 'react'

import dva from 'dva'

import Counter from './Counter'

//dva 是一个函数 通过执行它可以拿到一个app 对象

let app = dva();

// function delay(ms) {

//     return new Promise(function (resolve, reject) {

//         setTimeout(function () {

//             resolve()

//         }, ms)

//     })

// }

//

// function getAmount() {

//     return fetch('http://localhost:3000/amount').then(res => res.json());

// }

//app.router app.start() app.model

//一个模板就是一个状态,然后把reducer和状态写在一起

//添加一个模型

app.model({

  //命名空间: 因为一个应用会有很多个模型,每一个模型有一个对象

  namespace: 'counter',

  //此命名空间的默认状态

  state: {current: 0, height: 0},

  //他是用来接收action ,修改仓库状态

  reducers: {

    //reducer接受老状态和动作,返回新状态

    //state老状态(parameter) action:AnyAction

    add(state, action) {

      // let current = state.current + action.payload;

      // return {current, height: current > state.height ? current : state.height}

      return {current: state.current + 1}

    },

    // minus(state, action) {

    //     return {...state, current: state.current - action.payload}

    // }

  },

  //它是用来执行副作用的,比如说异步操作,调用api接口

  effects: {

    //表示这是一个generator effect=redux-saga/effects

    // * add(action, {call, put}) {

    //     //表示这是一个generator

    //     //amount  是接口中的变量  call 调用方法

    //     let {amount}=yield call(getAmount);

    //     //type;'方法'

    //     yield put({type:'add',payload:amount})

    //     // yield call(delay, 1000);

    //     // yield put({type: 'minus'})//可以不加前缀,counter/minus/派发其他的可以写

    // }

  },

});

//参数是一个函数,此应用本身就是要熏染函数的返回值

app.router(() => <Counter />);

//本质是启动应用,就是通过app.router获取组件,通过ReactDOM渲染到容器上

app.start('#root');

import React from 'react';

import {connect} from 'dva';

import './Counter.css';

class Counter extends React.Component {

    render() {

        return (<div>

            <div className={'container'}>

                <p>当前记录{this.props.current}</p>

                <button onClick={() => this.props.dispatch({type: 'counter/add'})}>add</button>

            </div>

        </div>)

    }

}

export default connect(

    state => state.counter

)(Counter);