> 웹 프론트엔드 > JS 튜토리얼 > React 프로젝트 개발에 대해 무엇을 알아야 합니까? React 프로젝트 개발에 관한 구체적인 사항(예시 포함)

React 프로젝트 개발에 대해 무엇을 알아야 합니까? React 프로젝트 개발에 관한 구체적인 사항(예시 포함)

寻∝梦
풀어 주다: 2018-09-11 11:16:30
원래의
2426명이 탐색했습니다.

이번 글은 주로 리액트 프로젝트를 개발할 때 주의해야 할 사항에 대해 이야기하고 있습니다. 알고 싶다면 지금 바로 이 글을 클릭해서 읽어보세요

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

기본 작성 방법

접속 페이지 작성 방법

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

render(<Main />,document.getElementById(&#39;app&#39;));
로그인 후 복사

컴포넌트 작성 방법

import React,{ Component } from &#39;react&#39;;
export default class Main extends Component{
    render(){        return (
            <p>
                组件
            </p>
        )
    }
}
로그인 후 복사

값 전달 컴포넌트

부모 컴포넌트에서 자식 컴포넌트로

父组件传给子组件靠props
로그인 후 복사
import React,{ Component } from &#39;react&#39;;
import { render } from &#39;react-dom&#39;;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(&#39;app&#39;));
로그인 후 복사

자식 컴포넌트에서 부모 컴포넌트로

子组件传给父组件靠事件
子组件传递给父组件的过程描述,父组件传递给子组件一个函数,子组件执行这个函数,然后把子组件自己的值可以通过穿参的方式传递进去。然后父组件接受到这个值,进行相应的操作。
로그인 후 복사
import React,{ Component } from &#39;react&#39;;
import { render } from &#39;react-dom&#39;;class Main extends Component{
    constructor(props){        super(props);        this.state = {
            value:&#39;init value&#39;
        }
    }
    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(&#39;app&#39;));
로그인 후 복사

webpack

으아악

일반적인 웹팩 구성 파일은 다음과 같습니다.

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

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

es6 부분

React에서는 일반적으로 몇 가지 es6 구문을 알아야 합니다. React를 위해 es6의 몇 가지 기본 사용법과 작성 방법이 나열되어 있습니다.

가져오기 및 내보내기

import에 새로운 기능이 추가되었습니다

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

"{}"를 사용하여 도입된 변수는 해당 파일에 반드시 존재해야 하는 동일한 이름을 가진 변수입니다.
"{}" 없이 도입된 변수는 해당 파일에서 기본 내보내기에 의해 던져진 변수이며, 변수 이름은 다를 수 있습니다.

내보내기가 뭔가를 던집니다.

import webpack from &#39;webpack&#39;;import React from &#39;react&#39;;import { Component } from &#39;react&#39;;
로그인 후 복사
로그인 후 복사

내보내기는 여러 번 던져서 여러 번 사용할 수 있습니다.
내보내기 기본값은 하나만 사용할 수 있으며 이는 기본적으로 발생함을 의미합니다.

class 및 확장

클래스의 본질은 클래스를 선언하는 키워드입니다. 존재 의미는 var, let, const, function 등과 같습니다.
사용 방법:

function a(){    console.log(1);
}let b = 1;export a;export b;export default a;
로그인 후 복사
로그인 후 복사

extends는 상속을 나타내고, 사용 방법:

class Main{}
로그인 후 복사
로그인 후 복사

constructor는 생성자를 나타내고, super는 상위 클래스의 속성과 메서드를 상속합니다.

class Main extends Component{}
로그인 후 복사
로그인 후 복사

라이프사이클 기능

기본 라이프사이클 기능

3가지 상태로 구분

  • Mounting

  • Updating

  • Unmounting


  1. 마운팅 단계 – 일반적으로 이 단계의 수명 주기 기능 단계는 한 번만 실행됩니다.
    constructor()
    comComponentWillMount()
    comComponentDidMount()
    render()

  2. 업데이트 단계 – 여러 번 실행됩니다.
    comComponentWillReceiveProps()
    shouldComponentUpdate()
    render()
    comComponentD 아이디업데이트()

  3. Unmountint 단계 – 컴포넌트 언마운트 기간
    comComponentWillUnmount()
    이 단계의 컴포넌트 수명주기 기능입니다. 이전에는 getDefaultProps 및 getInitialState라는 두 가지 수명 주기 함수가 있었습니다.
    그러나 해당 기능은 이제 생성자로 대체되었습니다.

컴포넌트의 수명주기 사용 시나리오

  1. constructor
    이를 사용하는 일반적인 방법은 상태

    class Main extends Component{
        constructor(props){        super(props)
        }
    }
    로그인 후 복사
    로그인 후 복사
  2. comComponentWillMount
    일부 초기화 작업을 수행하는 것입니다. 아니면 데이터 로딩을 해보세요.
    <코드> <br/>componentWillMount(){ <br/> this.fetchData(); <br/>} <br/>

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

    constructor(props){
        super(props);
        this.state = {
            value:&#39;&#39;
        }}
    로그인 후 복사
    로그인 후 복사
  4. render
    一个react组件中必须包含的函数,返回jsx语法的dom元素

    componentWillMount(){    this.fetchData();
    }
    로그인 후 복사
    로그인 후 복사
  5. componentWillReceiveProps
    在props传递的时候,可以在render之前进行一些处理。不会触发二次setState。
    只有一个参数。代表的是props对象

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

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

  8. componentWillUnmount
    最常见的场景,对组件附加的setInterval、setTimeout进行清除。
    <br/>componentWillUnMount(){ <br/> clearInterval(this.timer); <br/>} <br/>comComponentWillMount(){

    this.fetchData();
  9. }

comComponentDidMount

일반적인 시나리오는 데이터 요청

render(){    return (
        <p>123</p>
    )
}
로그인 후 복사
로그인 후 복사

render

반응 구성 요소에 포함되어야 하며 jsx 구문의 dom 요소를 반환하는 함수입니다.

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



comComponentWillReceiveProps
props가 전달되면 렌더링 전에 일부 처리가 수행될 수 있습니다. SetState는 두 번 트리거되지 않습니다.
매개변수는 하나뿐입니다. props 객체를 나타냅니다

shouldComponentUpdate

props와 state를 각각 나타내는 두 개의 매개변수가 있습니다

true 또는 false를 반환해야 합니다. 그렇지 않으면 구문 오류가 보고됩니다.
성능 최적화를 수행할 때 매우 유용합니다

comComponentDidUpdate

구성 요소가 로드되고 일부 작업이 수행됩니다

comComponentWillUnmount

가장 일반적인 시나리오는 구성 요소에 연결된 setInterval 및 setTimeout을 지우는 것입니다.

<코드>

comComponentWillUnMount(){

clearInterval(this.timer);

}

comComponentWillReceiveProps parsing

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

shouldComponentUpdate parsing

immutable.js
로그인 후 복사
로그인 후 복사

성능 최적화 부분

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);
        }
    })}
로그인 후 복사
로그인 후 복사

데이터 요청 부분

ajax

전통적인 것을 사용하다 XMLHttpRequest 객체는 데이터 요청을 수행합니다.

var xhr = new XMLHttpRequest();

xhr.open(type, url, true)

xhr.onReadyStateChange = ()=>{

if (xhr.readyState == 4 && xhr.status == 200) {

​ ​ 성공(xhr.responseText); }

}

promise

promise는 es6에서 제안하는 데이터 요청 방식입니다. 현재 많은 브라우저에서는 아직 이를 구현하지 않았습니다. 하지만 blueBird.js와 같은 promise에 대한 폴리필이 있습니다.

기본 사용법은 다음과 같습니다: Promise object

 fetch("http://homework.shsoapp.com:80/ttzyservice/task/getTaskSubjectList",{        method: &#39;POST&#39;,        headers: {            &#39;Content-Type&#39;: &#39;application/x-www-form-urlencoded&#39;
        },        mode: &#39;cors&#39;,        body: "page=1&rows=10"
    }).then(res =>{        console.log(res);        return res.json()
    }).then(res => {        console.log(res);
    })
로그인 후 복사
로그인 후 복사
🎜fetch🎜🎜fetch의 기본 사용법: 🎜
import { BrowserRouter as Router, Link, Route,Switch} from &#39;react-router-dom&#39;;
export default class Main extends Component{
    render(){        return(
            <Router>
                <p>
                    <Switch>
                        <Route path=&#39;/&#39; component={page1}>
                        <Route path=&#39;/home&#39; component={page2}>
                        <Route path=&#39;/age&#39; component={page3}>
                    </Switch>
                </p>
            </Router>
        )
    }
}
로그인 후 복사
로그인 후 복사
🎜react Routing🎜🎜기본 사용법🎜
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
    }
}
로그인 후 복사
로그인 후 복사
🎜redux는 간단하고 실용적입니다🎜 🎜작업 🎜
import { addtask,addContent } from &#39;actions&#39;;export function(state = &#39;&#39;,action){
    switch (action.type){        case ADD_TASK:            return action.task;            break;        case ADD_CONTENT:            return action.content;            break;        default:            return state;
    }
}
로그인 후 복사
로그인 후 복사
🎜reducers🎜
对react项目开发,我大概对它的知识点进行了分类,主要由以下几个部分组成。
로그인 후 복사
로그인 후 복사
🎜                                                                          > es6의 기본 사용법과 작성 방법은 여기에 나열되어 있습니다. 🎜🎜가져오기 및 내보내기🎜🎜가져오기는 뭔가를 소개합니다🎜
import webpack from &#39;webpack&#39;;import React from &#39;react&#39;;import { Component } from &#39;react&#39;;
로그인 후 복사
로그인 후 복사

其中使用“{}”引入的变量是那个文件中必须存在的变量名相同的变量。
不使用“{}”引入的变量是那个文件中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:&#39;&#39;
        }}
    로그인 후 복사
    로그인 후 복사
  2. componentWillMount
    进行一些初始化的操作。或者进行一些数据加载。
    <br/>componentWillMount(){ <br/> this.fetchData(); <br/>} <br/>

  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进行清除。
    <br/>componentWillUnMount(){ <br/> clearInterval(this.timer); <br/>} <br/>

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: &#39;POST&#39;,        headers: {            &#39;Content-Type&#39;: &#39;application/x-www-form-urlencoded&#39;
        },        mode: &#39;cors&#39;,        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 &#39;react-router-dom&#39;;
export default class Main extends Component{
    render(){        return(
            <Router>
                <p>
                    <Switch>
                        <Route path=&#39;/&#39; component={page1}>
                        <Route path=&#39;/home&#39; component={page2}>
                        <Route path=&#39;/age&#39; 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 &#39;actions&#39;;export function(state = &#39;&#39;,action){
    switch (action.type){        case ADD_TASK:            return action.task;            break;        case ADD_CONTENT:            return action.content;            break;        default:            return state;
    }
}
로그인 후 복사
로그인 후 복사

위 내용은 React 프로젝트 개발에 대해 무엇을 알아야 합니까? React 프로젝트 개발에 관한 구체적인 사항(예시 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿