평론 react 전후 단 동구 과장

앞 뒤 동 구성 렌 더 링:클 라 이언 트 가 React 구성 요 소 를 포함 하 는 페이지 를 요청 할 때 서버 가 먼저 출력 페이지 에 응답 하고 클 라 이언 트 와 서버 가 첫 번 째 상호작용 을 합 니 다.그 다음 에 구성 요 소 를 불 러 오 는 과정 에서 서버 에 Ajax 요청 을 해 야 하 는 등 클 라 이언 트 와 서버 가 다시 상호작용 을 하면 상대 적 으로 오래 걸 립 니 다.앞 뒤 동 구성 렌 더 링 은 페이지 를 처음 불 러 올 때 모든 곳 을 렌 더 링 하여 클 라 이언 트 에 게 한꺼번에 응답 할 수 있 습 니 다.
실현 방식:패키지 관리 도구 와 모듈 의존 방식 이 일치 하도록 보장 합 니 다.
패키지 관리 도구-npm 관리,앞 뒤 모두 같은 호 환 패 키 지 를 사용 하도록 보장 합 니 다.
모듈 의존 방식-webpack,전후 단 모두 comonjs 의존 방식 을 사용 하여 코드 가 서로 의존 할 수 있 도록 확보 합 니 다.
서버 렌 더 링 방법:
react 온 가족 통:react,react-router,redux
react 와 reactDOM.
reactDOM 이 여기 서 제공 하 는 지원 은 바로 reactDOM.render 와 reactDOM.renderToString 함수 입 니 다.그 중에서 브 라 우 저 에서 DOM 구 조 를 생 성하 고 후 자 는 서버 에서 해당 하 는 HTML 문자열 템 플 릿 을 생 성 합 니 다.react 는 생 성 된 DOM 구조 에 data-react-checksum 의 속성 을 추가 합 니 다.이것 은 adler 32 알고리즘 을 검증 하여 두 템 플 릿 의 일치 성 을 확보 합 니 다.
这里写图片描述

또한 react 의 생명 주 기 는 앞 뒤 부분 렌 더 링 과정 에서 도 다르다.전단 렌 더 링 구성 요 소 는 완전한 수명 주 기 를 가지 고 있 으 며,백 엔 드 렌 더 링 은 componentWillMount 의 수명 주기 만 있 습 니 다.이 는 데이터 요청 등 을 보 내 려 면 componentWillMount 의 수명 주기 에 두 어야 한 다 는 것 을 의미한다.클 라 이언 트 의 논 리 를 단독으로 처리 하려 면 componentDid Mount 와 같은 다른 수명 주기 에 놓 을 수 있 습 니 다.
react-router
react-router 는 react 의 경로-보기 제어 라 이브 러 리 로 서로 다른 페이지 의 렌 더 링 을 제어 할 수 있 습 니 다.react-router 자 체 는 상태 기 입 니 다.설 정 된 경로 규칙 과 입력 한 url 경로 에 따라 match 방법 으로 해당 하 는 구성 요 소 를 찾 아 렌 더 링 합 니 다.
这里写图片描述

이 메커니즘 은 전단 과 백 엔 드 가 서로 통한다.예 를 들 어 백 엔 드 에서 다음 과 같은 실현 형식 으로 렌 더 링 을 한다.


app.use(async (ctx, next) => { 
match({ 
location: ctx.originalUrl, 
routes 
}, callback) 
//       ，   callback    
//      renderToString        
})

전단 에 있어 서도 이러한 논 리 를 처리 하 는 것 입 니 다.그러나 구성 요소 에 잘 밀봉 되 어 있 습 니 다.우 리 는 성명 식 경로 만 잘 쓰 면 url 의 변화 에 따라 자동 으로 발생 할 수 있 습 니 다.
redux
redux 는 react 의 데이터 흐름 관리 라 이브 러 리 입 니 다.그 는 서버 렌 더 링 에 대한 지원 이 간단 합 니 다.바로 단일 한 store 와 상 태 를 초기 화 할 수 있 습 니 다.백 엔 드 는 렌 더 링 을 할 때 단일 store 를 구축 하고 초기 상 태 를 json 형식 으로 전역 변 수 를 통 해 html 문자열 템 플 릿 을 생 성 합 니 다.
전단 은 초기 상 태 를 가 져 와 백 엔 드 가 서서히 완 성 된 후 와 똑 같은 store 를 생 성하 면 앞 뒤 엔 드 렌 더 링 데이터 의 일치 성 을 확보 하여 앞 뒤 엔 드 가 생 성 된 dom 구조 가 일치 하도록 합 니 다.
최적화 결과:
개발 효율 이 낮은 문제:같은 구조 응용 은 하나의 프로젝트 와 하나의 기술 창고 만 있 고 react 개발 경험 만 있 으 면 전단 과 백 엔 드 의 개발 에 신속하게 투입 할 수 있다.
유지 가능성 이 떨 어 지 는 문제:같은 구조 응용 은 대량의 코드 공용 을 할 수 있 는데 도구 방법,상수,페이지 구성 요소 와 redux 의 대부분 논리 등 을 포함 하여 실용성 이 크게 향상 된다.첫 화면 성능,SEO 등
처리 과정:
클 라 이언 트 요청-서버 에서 구성 요소 렌 더 링-클 라 이언 트 에 게 되 돌려 주기
1.같은 구성 이 필요 한 페이지(예 를 들 어 index.html)에 자리 표시 자 를 올 립 니 다.


<div id="root">@@@</div>
###

이상,클 라 이언 트 가 첫 번 째 요청 을 하면 서버 에서 구성 요소 의 html 내용 을@@@이 위치 에 표시 한 다음 에 서버 에서 이와 같은 js 코드 세그먼트 를 렌 더 링 하여 구성 요 소 를 최종 적 으로 DOM 에 렌 더 링 합 니 다.렌 더 링 앱 방법 은 사실상 구성 요 소 를 렌 더 링 하 는 것 이다.
2.renderApp 방법 을 직접 호출 하기 위해 renderApp 방법 을 window 에서 의 방법 으로 만들어 야 합 니 다.


window.renderApp = function(){ReactDOM.render(...)}

3.서버 에서 index.html 를 꺼 내 서 자리 차지 문자 의 내용 을 나타 내 고 자리 차지 문 자 를 대체 하 며 클 라 이언 트 에 게 한꺼번에 응답 합 니 다.
케이스
파일 구조


browser.js(              window.renderApp)

bundle.js( browser.js  bundle   )

Component.js(       )

express.js(   )

index.html(       )

package.json

index.html,페이지 를 나 와 자리 표시 자 를 놓 습 니 다.


<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Untitled Document</title>
</head>
<body>

 <div id="root">@@@</div>
 <script src="bundle.js"></script>
 ###
</body>
</html>

Component.js,구성 요 소 를 정의 합 니 다.


var React = require('react');
var ReactDOM = require('react-dom');

var Component = React.createClass({
 clickHandler: function(){
  alert(this.props.msg)
 },

 render: function(){
  return React.createElement('button', {onClick: this.clickHandler}, this.props.msg)
 }

})

module.exports = Component;

browser.js,구성 요소 렌 더 링 과정 을 window 대상 에 할당 합 니 다.


var React = require('react');
var ReactDOM = require('react-dom');

var Component = React.createFactory(require('./Component'));

window.renderApp = function(msg){
 ReactDOM.render(Component({msg: msg}), document.getElementById('root')); 
}

구성 요소 의 렌 더 링 을 촉발 할 수 있 습 니 다.잠시 후 서버 에서 이 코드 를 보 여 줍 니 다.
express.js,서버
이상,직 출 해 야 할 페이지 에 자리 표시 자 를 가지 고 구성 요 소 를 정의 하 며,렌 더 링 구성 요소 의 과정 을 window 대상 에 게 할당 하 였 습 니 다.서버 에서 현재 해 야 할 일 은 구성 요소 의 html 와 렌 더 링 구성 요 소 를 만 드 는 js 입 니 다.직 출 페이지 index.html 의 자리 표시 자 위치 에 놓 는 것 입 니 다.


var express = require('express');
var React = require('react');
var ReactDOMServer = require('react-dom/server');
var fs = require('fs');
var Component = React.createFactory(require('./Component'));

//        
var BUNDLE = fs.readFileSync('./bundle.js',{encoding:'utf8'});
var TEMPLATE = fs.readFileSync('./index.html',{encoding:'utf8'});

var app = express();

function home(req, res){
 var msg = req.params.msg || 'Hello';
 var comp = Component({msg: msg});

 //@@@         
 var page = TEMPLATE.replace('@@@', ReactDOMServer.renderToString(comp));

 //###       js
 page = page.replace('###', '<script>renderApp("'+msg+'")</script>')
 res.send(page);
}

//  
app.get('', home);
app.get('/bundle.js', function(req, res){
 res.send(BUNDLE);
})
app.get('/:msg', home);

app.listen(4000);

package.json 의 설정


"scripts": {
"start": "watchify ./browser.js -o ./bundle.js"
},

시작 모드
실행:npm start
실행:node express.js
탐색:localhost:4000
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

nginx 에서 사이트 아이콘 표시 설정

전단 개발 환경: react：^16.4.1 webpack：^4.16.0 웹 팩 에 favicon. ico 설정 추가: nginx 는 ico 에 대한 지원 을 추가 합 니 다:...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

평론 react 전후 단 동구 과장

좋은 웹페이지 즐겨찾기