欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

React项目开发你需要知道哪些?react项目开发具体事项(附实例)

程序员文章站 2022-04-16 21:00:11
...

本篇文章主要的讲述了关于react项目开发需要注意的哪些情况,想知道的同学就赶紧点进来看吧,现在就一起来阅读本篇文章吧

对react项目开发,我大概对它的知识点进行了分类,主要由以下几个部分组成。

基础写法

入口页面的写法

import React,{ Component } from 'react';import { render } from 'react-dom';import Main from './components/Main';

render(<Main />,document.getElementById('app'));

组件的写法

import React,{ Component } from 'react';
export default class Main extends Component{
    render(){        return (
            <p>
                组件
            </p>
        )
    }
}

组件传值

父组件传给子组件

父组件传给子组件靠props
import React,{ Component } from 'react';
import { render } from 'react-dom';class Main extends Component{
    render(){        return (
            <p>
                <Child  title="我是父组件"/>
            </p>
        )
    }
}class Child extends Component{
    render(){        return(
            <h2>{this.props.title}</h2>
        )
    }
}
render(<Main />,document.getElementById('app'));

子组件传给父组件

子组件传给父组件靠事件
子组件传递给父组件的过程描述,父组件传递给子组件一个函数,子组件执行这个函数,然后把子组件自己的值可以通过穿参的方式传递进去。然后父组件接受到这个值,进行相应的操作。
import React,{ Component } from 'react';
import { render } from 'react-dom';class Main extends Component{
    constructor(props){        super(props);        this.state = {
            value:'init value'
        }
    }
    render(){        return (
            <p>
                <p>{this.state.value}</p>
                <Child  onClick={(value)=>{this.setState({value:value})}}/>
            </p>
        )
    }
}class Child extends Component{
    render(){        return(
            <button onClick={()=>this.props.onClick("子组件的值")}>点击传值</button>
        )
    }
}
render(<Main />,document.getElementById('app'));

webpack

webpack的配置一般分为这么几个部分,entry、output、plugin、devServer、module等。

entry告诉webpack入口在哪。
output告诉webpack将来把文件打包到哪。
plugin代表一些其他的操作,如打开浏览器、文件压缩等处理。
devServer代表开发的时候启动一个本地服务器
module代表各种loader用来解析你的代码。

一个普通的webpack配置文件如下:

var webpack = require('webpack');module.exports = {    entry:"./src/index.js",    output:{        path:'public',        filename:'bundle.js'
    },    devServer:{        historyApiFallback:true,        hot:true,        inline:true
    },    plugins:[        new webpack.DefinePlugin({            'process.env.NODE.ENV': "development"
        }),        new webpack.HotModuleReplacementPlugin(),        new OpenBrowserPlugin({            url: 'http://localhost:8080'
        })
    ],    module:{        loaders:[{            test:/\.js[x]?$/,            exclude:/node_modules/,            loader:'babel-loader',            query:{                presets:['es2015','react','stage-1']
            }
        },{            test:/\.css$/,            loaders:['style',css]
        },{            test:/\.(png|jpg)$/,            loader:"url-loader"
        }]
    }
}

es6部分

在 react 中,es6语法一般是要会一些的,针对 react,关于es6一些基本的使用以及写法,这里列出来。

import和export

import引入一个东西

import webpack from 'webpack';import React from 'react';import { Component } from 'react';

其中使用“{}”引入的变量是那个文件中必须存在的变量名相同的变量。
不使用“{}”引入的变量是那个文件中export default默认抛出的变量,其中变量名可以不一样。

export抛出一个东西。

function a(){    console.log(1);
}let b = 1;export a;export b;export default a;

其中export可以抛出多个,多次使用。
export default只能使用一个,表示默认抛出。

class和extends

class的本质是一个申明类的关键字。它存在的意义和var、let、const、function等都是一样的。
使用方式:

class Main{}

extends代表继承,使用方式:

class Main extends Component{}

constructor代表构造函数,super是从父类继承属性和方法。

class Main extends Component{
    constructor(props){        super(props)
    }
}

生命周期函数

基本生命周期函数

分三个状态

  • Mounting

  • Updating

  • Unmounting


  1. Mounting阶段–一般在这个阶段生命周期函数只会执行一次
    constructor()
    componentWillMount()
    componentDidMount()
    render()

  2. Updating阶段–会执行多次
    componentWillReceiveProps()
    shouldComponentUpdate()
    render()
    componentDidUpdate()

  3. Unmountint阶段–组件卸载期
    componentWillUnmount()
    这就是现阶段的组件生命周期函数。之前还有两个生命周期函数叫 getDefaultProps 以及 getInitialState。
    但是它们的功能现在被constructor代替。

组件的生命周期使用场景

  1. constructor
    常见的一个使用方式就是state的初始化

    constructor(props){
        super(props);
        this.state = {
            value:''
        }}
  2. componentWillMount
    进行一些初始化的操作。或者进行一些数据加载。

    componentWillMount(){
    this.fetchData();
    }

  3. componentDidMount
    常见场景就是数据请求

    componentWillMount(){    this.fetchData();
    }
  4. render
    一个react组件中必须包含的函数,返回jsx语法的dom元素

    render(){    return (
            <p>123</p>
        )
    }
  5. componentWillReceiveProps
    在props传递的时候,可以在render之前进行一些处理。不会触发二次setState。
    只有一个参数。代表的是props对象

  6. shouldComponentUpdate
    有两个参数,分别代表props和state
    必须返回一个true或者false。否则会语法报错。
    在进行一些性能优化的时候非常有用

  7. componentDidUpdate
    组件加载完毕,进行某些操作

  8. componentWillUnmount
    最常见的场景,对组件附加的setInterval、setTimeout进行清除。

    componentWillUnMount(){
    clearInterval(this.timer);
    }

componentWillReceiveProps解析

常见的使用场景是,根据传递不同的props,渲染不同的界面数据。
项目比较复杂的情况下,一个页面的值发生变化,就要导致另一个页面的值发生改变,这样需要通过props的方式来告知对方,你的值发生改变。让另外一个组件更新dom。需要使用这个周期函数进行监听接受到的props,从而根据这个props进行相应的数据处理。

shouldComponentUpdate解析

这个函数的返回值是一个布尔值。返回一个true。
返回一个false的情况下,它的的状态不会进行更新。

性能优化部分

immutable.js

数据请求部分

ajax

在react中,可以使用传统的XMLHttpRequest对象进行数据请求。
var xhr = new XMLHttpRequest();
xhr.open(type, url, true);
xhr.onReadyStateChange = ()=>{
if (xhr.readyState == 4 && xhr.status == 200) {
sucess(xhr.responseText);
}
}

promise

promise是es6提出的数据请求方式。目前很多浏览器还没有实现。但是有promise的polyfill,如blueBird.js
基本的使用方式是:Promise对象

const Promise = require(`../vendor/bluebird/bluebird.js`);let get = (url,data) => {    return new Promise((resolve, reject) => {        if(res){
            resolve(res);
        }else if(err){
            reject(err);
        }
    })}

fetch

fetch的基本使用方式:

 fetch("http://homework.shsoapp.com:80/ttzyservice/task/getTaskSubjectList",{        method: 'POST',        headers: {            'Content-Type': 'application/x-www-form-urlencoded'
        },        mode: 'cors',        body: "page=1&rows=10"
    }).then(res =>{        console.log(res);        return res.json()
    }).then(res => {        console.log(res);
    })

react 路由

基本使用

import { BrowserRouter as Router, Link, Route,Switch} from 'react-router-dom';
export default class Main extends Component{
    render(){        return(
            <Router>
                <p>
                    <Switch>
                        <Route path='/' component={page1}>
                        <Route path='/home' component={page2}>
                        <Route path='/age' component={page3}>
                    </Switch>
                </p>
            </Router>
        )
    }
}

redux的简单实用

actions

const ADD_TASK = "ADD_TASK";const ADD_CONTENT = "ADD_CONTENT";

export function addtask(task){
    return {
        type: ADD_TASK,
        task
    }
}
export function addContent(content){
    return {
        type: ADD_CONTENT,
        content
    }
}

reducers

import { addtask,addContent } from 'actions';export function(state = '',action){
    switch (action.type){        case ADD_TASK:            return action.task;            break;        case ADD_CONTENT:            return action.content;            break;        default:            return state;
    }
}

对react项目开发,我大概对它的知识点进行了分类,主要由以下几个部分组成。

基础写法

入口页面的写法

import React,{ Component } from 'react';import { render } from 'react-dom';import Main from './components/Main';

render(<Main />,document.getElementById('app'));

组件的写法

import React,{ Component } from 'react';

export default class Main extends Component{
    render(){        return (
            <p>
                组件
            </p>
        )
    }
}

组件传值

父组件传给子组件

父组件传给子组件靠props
import React,{ Component } from 'react';
import { render } from 'react-dom';class Main extends Component{
    render(){        return (
            <p>
                <Child  title="我是父组件"/>
            </p>
        )
    }
}class Child extends Component{
    render(){        return(
            <h2>{this.props.title}</h2>
        )
    }
}
render(<Main />,document.getElementById('app'));

子组件传给父组件

子组件传给父组件靠事件
子组件传递给父组件的过程描述,父组件传递给子组件一个函数,子组件执行这个函数,然后把子组件自己的值可以通过穿参的方式传递进去。然后父组件接受到这个值,进行相应的操作。
import React,{ Component } from 'react';
import { render } from 'react-dom';class Main extends Component{
    constructor(props){        super(props);        this.state = {
            value:'init value'
        }
    }
    render(){        return (
            <p>
                <p>{this.state.value}</p>
                <Child  onClick={(value)=>{this.setState({value:value})}}/>
            </p>
        )
    }
}class Child extends Component{
    render(){        return(
            <button onClick={()=>this.props.onClick("子组件的值")}>点击传值</button>
        )
    }
}
render(<Main />,document.getElementById('app'));

webpack

webpack的配置一般分为这么几个部分,entry、output、plugin、devServer、module等。

entry告诉webpack入口在哪。
output告诉webpack将来把文件打包到哪。
plugin代表一些其他的操作,如打开浏览器、文件压缩等处理。
devServer代表开发的时候启动一个本地服务器
module代表各种loader用来解析你的代码。

一个普通的webpack配置文件如下:

var webpack = require('webpack');module.exports = {    entry:"./src/index.js",    output:{        path:'public',        filename:'bundle.js'
    },    devServer:{        historyApiFallback:true,        hot:true,        inline:true
    },    plugins:[        new webpack.DefinePlugin({            'process.env.NODE.ENV': "development"
        }),        new webpack.HotModuleReplacementPlugin(),        new OpenBrowserPlugin({            url: 'http://localhost:8080'
        })
    ],    module:{        loaders:[{            test:/\.js[x]?$/,            exclude:/node_modules/,            loader:'babel-loader',            query:{                presets:['es2015','react','stage-1']
            }
        },{            test:/\.css$/,            loaders:['style',css]
        },{            test:/\.(png|jpg)$/,            loader:"url-loader"
        }]
    }
}

es6部分

在 react 中,es6语法一般是要会一些的,针对 react,关于es6一些基本的使用以及写法,这里列出来。

import和export

import引入一个东西

import webpack from 'webpack';import React from 'react';import { Component } from 'react';

其中使用“{}”引入的变量是那个文件中必须存在的变量名相同的变量。
不使用“{}”引入的变量是那个文件中export default默认抛出的变量,其中变量名可以不一样。

export抛出一个东西。

function a(){    console.log(1);
}let b = 1;export a;export b;export default a;

其中export可以抛出多个,多次使用。
export default只能使用一个,表示默认抛出。

class和extends

class的本质是一个申明类的关键字。它存在的意义和var、let、const、function等都是一样的。
使用方式:

class Main{}

extends代表继承,使用方式:

class Main extends Component{}

constructor代表构造函数,super是从父类继承属性和方法。

class Main extends Component{
    constructor(props){        super(props)
    }
}

生命周期函数

基本生命周期函数

分三个状态

  • Mounting

  • Updating

  • Unmounting


  1. Mounting阶段–一般在这个阶段生命周期函数只会执行一次
    constructor()
    componentWillMount()
    componentDidMount()
    render()

  2. Updating阶段–会执行多次
    componentWillReceiveProps()
    shouldComponentUpdate()
    render()
    componentDidUpdate()

  3. Unmountint阶段–组件卸载期
    componentWillUnmount()
    这就是现阶段的组件生命周期函数。之前还有两个生命周期函数叫 getDefaultProps 以及 getInitialState。
    但是它们的功能现在被constructor代替。

组件的生命周期使用场景

  1. constructor
    常见的一个使用方式就是state的初始化

    constructor(props){
        super(props);
        this.state = {
            value:''
        }}
  2. componentWillMount
    进行一些初始化的操作。或者进行一些数据加载。

    componentWillMount(){
    this.fetchData();
    }

  3. componentDidMount
    常见场景就是数据请求

    componentWillMount(){    this.fetchData();
    }
  4. render
    一个react组件中必须包含的函数,返回jsx语法的dom元素

    render(){    return (
            <p>123</p>
        )
    }
  5. componentWillReceiveProps
    在props传递的时候,可以在render之前进行一些处理。不会触发二次setState。
    只有一个参数。代表的是props对象

  6. shouldComponentUpdate
    有两个参数,分别代表props和state
    必须返回一个true或者false。否则会语法报错。
    在进行一些性能优化的时候非常有用

  7. componentDidUpdate
    组件加载完毕,进行某些操作

  8. componentWillUnmount
    最常见的场景,对组件附加的setInterval、setTimeout进行清除。

    componentWillUnMount(){
    clearInterval(this.timer);
    }

componentWillReceiveProps解析

常见的使用场景是,根据传递不同的props,渲染不同的界面数据。
项目比较复杂的情况下,一个页面的值发生变化,就要导致另一个页面的值发生改变,这样需要通过props的方式来告知对方,你的值发生改变。让另外一个组件更新dom。需要使用这个周期函数进行监听接受到的props,从而根据这个props进行相应的数据处理。

shouldComponentUpdate解析

这个函数的返回值是一个布尔值。返回一个true。
返回一个false的情况下,它的的状态不会进行更新。

性能优化部分

immutable.js

数据请求部分

ajax

在react中,可以使用传统的XMLHttpRequest对象进行数据请求。
var xhr = new XMLHttpRequest();
xhr.open(type, url, true);
xhr.onReadyStateChange = ()=>{
if (xhr.readyState == 4 && xhr.status == 200) {
sucess(xhr.responseText);
}
}

promise

promise是es6提出的数据请求方式。目前很多浏览器还没有实现。但是有promise的polyfill,如blueBird.js
基本的使用方式是:Promise对象

const Promise = require(`../vendor/bluebird/bluebird.js`);let get = (url,data) => {    return new Promise((resolve, reject) => {        if(res){
            resolve(res);
        }else if(err){
            reject(err);
        }
    })}

fetch

fetch的基本使用方式:

 fetch("http://homework.shsoapp.com:80/ttzyservice/task/getTaskSubjectList",{        method: 'POST',        headers: {            'Content-Type': 'application/x-www-form-urlencoded'
        },        mode: 'cors',        body: "page=1&rows=10"
    }).then(res =>{        console.log(res);        return res.json()
    }).then(res => {        console.log(res);
    })

react 路由

基本使用

import { BrowserRouter as Router, Link, Route,Switch} from 'react-router-dom';
export default class Main extends Component{
    render(){        return(
            <Router>
                <p>
                    <Switch>
                        <Route path='/' component={page1}>
                        <Route path='/home' component={page2}>
                        <Route path='/age' component={page3}>
                    </Switch>
                </p>
            </Router>
        )
    }
}

redux的简单实用

actions

const ADD_TASK = "ADD_TASK";const ADD_CONTENT = "ADD_CONTENT";

export function addtask(task){
    return {
        type: ADD_TASK,
        task
    }
}
export function addContent(content){
    return {
        type: ADD_CONTENT,
        content
    }
}

reducers

import { addtask,addContent } from 'actions';export function(state = '',action){
    switch (action.type){        case ADD_TASK:            return action.task;            break;        case ADD_CONTENT:            return action.content;            break;        default:            return state;
    }
}

以上就是React项目开发你需要知道哪些?react项目开发具体事项(附实例)的详细内容,更多请关注其它相关文章!

相关标签: react-路由 react