반응은 어떻게 작동하나요? 반응의 작동 원리에 대한 자세한 소개
- 寻∝梦원래의
- 2018-09-11 11:33:085538검색
이 기사는 주로 React의 작동 원리에 대해 설명합니다. 내용에는 작동 원리의 구체적인 프로세스가 포함되어 있습니다. 이제 이 기사를 함께 읽어 보겠습니다.
현재 가장 인기 있는 프런트 엔드 프레임워크에는 AngularJS, React, Bootstrap 등이 있습니다. ReactJS를 접한 이후로 ReactJs의 가상 DOM(Virtual DOM)과 컴포넌트 기반 개발에 깊은 매력을 느꼈습니다. 저와 함께 ReactJs의 스타일을 경험해 볼까요~~ 글이 좀 길지만 천천히 읽어보시면 될 것 같습니다. 잘 이해하세요 대박~
1. ReactJS 소개
React는 Facebook의 내부 프로젝트에서 시작되었습니다. 회사는 시중에 나와 있는 모든 JavaScript MVC 프레임워크에 만족하지 않았기 때문에 자체 프레임워크를 작성하여 Instagram을 구축하기로 결정했습니다. 웹사이트. 만들고 나서 이 세트가 매우 유용하다는 것을 알게 되었고, 2013년 5월에 오픈 소스로 공개되었습니다. React의 디자인 아이디어는 매우 독특하고 혁명적인 혁신이며 뛰어난 성능을 가지고 있으며 코드 로직이 매우 간단하기 때문입니다. 따라서 앞으로 웹 개발의 주류 도구가 될 수 있다고 생각하면서 점점 더 많은 사람들이 관심을 갖고 사용하기 시작하고 있습니다.
2. ReactJS의 이해와 ReactJS의 장점
우선 React에 대한 몇 가지 오해를 정리해 보겠습니다.
React는 완전한 MVC 프레임워크가 아닙니다. MVC는 최대입니다. React조차도 MVC 개발 모델을 잘 인식하지 못합니다.
React의 서버 측 렌더링 기능은 실제로 핵심 시작점이 아니라 케이크 위의 장식으로 간주될 수 있습니다. , 공식 React 웹사이트에서는 서버 측 애플리케이션에 대해 거의 언급하지 않습니다.
어떤 사람들은 React를 웹 구성요소와 비교하지만 둘은 완전히 경쟁적이지는 않습니다.
React는 새로운 템플릿 언어가 아닙니다. JSX는 단지 표현일 뿐이며 React는 JSX 없이도 작동할 수 있습니다.
1. ReactJS의 배경과 원리
웹 개발에서는 항상 변화하는 데이터를 실시간으로 UI에 반영해야 하고, 그 다음에는 DOM을 운용해야 합니다. 복잡하거나 빈번한 DOM 작업은 일반적으로 성능 병목 현상의 원인입니다. 고성능의 복잡한 DOM 작업을 수행하는 방법은 일반적으로 프런트 엔드 개발자의 기술을 나타내는 중요한 지표입니다. React는 이러한 목적을 위해 가상 DOM(Virtual DOM) 메커니즘을 도입합니다. DOM API 세트는 Javascript를 사용하여 브라우저 측에서 구현됩니다. React를 기반으로 개발할 때 모든 DOM 구성은 데이터가 변경될 때마다 전체 DOM 트리를 재구성한 다음 React는 현재 전체 DOM 트리와 이전 DOM 트리를 비교하여 DOM 구조를 얻습니다. 그러면 변경이 필요한 부분만 실제 브라우저 DOM에서 업데이트됩니다. 그리고 React는 이벤트 루프에서 가상 DOM을 일괄적으로 새로 고칠 수 있습니다(이벤트 루프 내의 두 가지 데이터 변경 사항은 병합됩니다. 예를 들어 노드 내용을 A에서 B로, 그리고 B에서 A로 계속 변경하면 React는 UI가 변경되지 않은 것으로 간주합니다. , 이 논리는 일반적으로 매우 복잡합니다. 매번 완전한 가상 DOM 트리를 구축해야 하지만, 가상 DOM이 메모리 데이터이기 때문에 성능이 매우 높고, 실제 DOM에서 Diff 부분만 동작시켜 성능을 향상시킨다. 이러한 방식으로 성능을 보장하면서 개발자는 특정 데이터 변경 사항이 하나 이상의 특정 DOM 요소로 업데이트되는 방식에 더 이상 주의를 기울일 필요가 없으며 전체 인터페이스가 모든 데이터 상태에서 렌더링되는 방식에만 주의하면 됩니다.
1990년대처럼 서버 측 렌더링을 사용하여 순수 웹 페이지를 작성했다면 서버 측에서 해야 할 일은 데이터를 기반으로 HTML을 렌더링하여 브라우저에 보내는 것뿐이라는 것을 알아야 합니다. 사용자 클릭으로 인해 특정 상태 텍스트를 변경해야 하는 경우 전체 페이지를 새로 고쳐도 됩니다. 서버는 HTML의 어떤 작은 부분이 변경되었는지 알 필요가 없으며 데이터를 기반으로 전체 페이지를 새로 고치기만 하면 됩니다. 즉, 모든 UI 변경은 전체 새로고침을 통해 수행됩니다. React는 이 개발 모델을 고성능 방식으로 프런트 엔드에 가져옵니다. 인터페이스를 업데이트할 때마다 전체 페이지가 새로 고쳐졌다고 생각할 수 있습니다. 성능을 보장하기 위해 부분 업데이트를 수행하는 방법은 React 프레임워크가 수행해야 하는 작업입니다.
Facebook의 React 소개 영상에 나오는 채팅 애플리케이션의 예를 사용하면, 새로운 메시지가 오면 전통적인 개발 아이디어는 위와 같습니다. 개발 프로세스에서는 어떤 데이터가 왔는지, 어떻게 새로운 DOM을 추가하는지 알아야 합니다. node to 현재 DOM 트리에서는 React 기반의 개발 아이디어는 아래와 같습니다. 두 데이터 간의 UI 변경은 전적으로 프레임워크에 맡겨집니다. React를 사용하면 로직 복잡도가 크게 줄어들어 개발 난이도가 낮아지고 버그가 발생할 확률이 줄어든다는 것을 알 수 있습니다.
2. 컴포넌트화
Virtual DOM(virtual-dom)은 단순한 UI 개발 로직을 제공할 뿐만 아니라 컴포넌트 개발의 아이디어를 제공합니다. 소위 컴포넌트는 독립적인 기능을 가진 UI 컴포넌트입니다. React에서는 UI의 구성을 컴포넌트 형태로 다시 생각해 보고, UI에서 상대적으로 독립적인 기능을 가진 각 모듈을 컴포넌트로 정의한 다음, 작은 컴포넌트를 결합하거나 중첩하여 큰 컴포넌트를 형성하고, 최종적으로 전체 UI의 구성을 완료할 것을 권장합니다. 예를 들어, Facebook의 전체 instagram.com 사이트는 React를 사용하여 개발되었습니다. 전체 페이지는 수많은 다른 중첩 구성 요소를 포함하는 하나의 큰 구성 요소입니다. 관심이 있다면 그 뒤에 있는 코드를 살펴보세요.
MVC의 아이디어로 뷰-데이터-컨트롤러를 분리할 수 있다면, 컴포넌트 기반 사고 방식은 UI 기능 모듈 간의 분리를 가져옵니다. 일반적인 블로그 댓글 인터페이스를 통해 MVC와 컴포넌트 기반 개발 아이디어의 차이점을 살펴보겠습니다.
MVC 개발 모델의 경우 개발자는 성능, 데이터 및 제어를 분리하기 위해 세 가지를 서로 다른 클래스로 정의합니다. 개발자는 느슨한 결합을 달성하기 위해 기술적인 관점에서 UI를 더 분할합니다.
React의 경우 기능적 관점에서 보면 개발자가 UI를 여러 구성 요소로 나누고 각 구성 요소를 독립적으로 패키징하는 것은 완전히 새로운 아이디어입니다.
React에서는 인터페이스 모듈의 자연스러운 구분에 따라 코드를 구성하고 작성합니다. 주석 인터페이스의 경우 전체 UI는 작은 구성 요소로 구성된 큰 구성 요소이며 각 구성 요소는 독립적인 로직 부분에만 관심을 갖습니다. 서로.
React는 구성 요소가 다음과 같은 특성을 가져야 한다고 믿습니다.
(1) 구성 가능: 구성 요소는 다른 구성 요소와 함께 사용하기 쉬우거나 다른 구성 요소 내에 중첩됩니다. 구성 요소가 내부에 다른 구성 요소를 생성하는 경우 상위 구성 요소는 자신이 만든 하위 구성 요소를 소유합니다. 이 기능을 통해 복잡한 UI를 여러 개의 간단한 UI 구성 요소로 분할할 수 있습니다.
(2) 재사용 가능(Reusable): 각 구성 요소에는 독립적인 기능이 있습니다.
(3) 유지 관리 가능(Maintainable): 각각의 작은 구성 요소에는 자체 로직만 포함되어 있어 이해 및 유지 관리가 더 쉽습니다.
2. ReactJS를 다운로드하고 Hello, world를 작성하세요.
ReactJs 다운로드는 매우 간단합니다. 모든 사람이 쉽게 다운로드할 수 있도록 다운로드 주소는 http://facebook.github.io/react/downloads.html입니다. 다운로드가 완료되면 압축된 파일이 표시됩니다. 패키지. . 압축을 푼 후 새 html 파일을 만들고 두 개의 js 파일인 React.js와 JSXTransformer.js를 참조합니다. html 템플릿은 다음과 같습니다(js 경로를 직접 변경하세요):
nbsp;html>
<script></script>
<script></script>
<p></p>
<script>
// ** Our code goes here! **
</script>
여기에서 스크립트 유형이 text/jsx인 이유가 궁금할 수 있습니다. 이는 React의 고유한 JSX 구문이 JavaScript와 호환되지 않기 때문입니다. . JSX를 사용하는 경우에는 type="text/jsx"를 추가해야 합니다. 둘째, React는 두 개의 라이브러리(react.js 및 JSXTransformer.js)를 제공하며 먼저 로드해야 합니다. 그 중 JSXTransformer.js는 JSX 구문을 JavaScript로 변환하는 데 사용됩니다. 문법. 이 단계는 시간이 많이 걸리므로 서버가 실제로 온라인 상태일 때 서버에서 수행해야 합니다. (자세한 내용을 보려면 PHP 중국어 웹사이트 React 참조 매뉴얼 열을 참조하세요.)
여기서 글쓰기를 시작할 수 있습니다. code, 먼저 ReactJs의 React.render 메소드를 알아봅시다:
React.render는 React의 가장 기본적인 메소드로, 템플릿을 HTML 언어로 변환하고 지정된 DOM 노드를 삽입하는 데 사용됩니다. .
아래에서는 스크립트 태그에 Hello, world를 출력하는 코드를 작성합니다. 코드는 다음과 같습니다. 🎜🎜 #
여기서 주목해야 할 점은 React는 jQuery에 의존하지 않는다는 것입니다. 물론 jQuery를 사용할 수 있지만 render의 두 번째 매개변수는 JavaScript 네이티브 getElementByID 메서드를 사용해야 하며 jQuery는 사용할 수 없습니다. DOM 노드를 선택합니다.
태그를 사용했기 때문에 브라우저에 Hello, world가 크게 표시되는 것을 볼 수 있습니다.
이제 ReactJS의 문에 들어오신 것을 축하합니다~~ 이제 ReactJs에 대해 자세히 알아볼까요~~
3. Jsx 구문
# 🎜🎜# HTML 언어는 따옴표 없이 JavaScript 언어로 직접 작성되어 HTML과 JavaScript를 혼합할 수 있는 구문입니다. AngularJ를 아는 사람이라면 다음 코드를 보면 매우 친숙하게 느껴질 것입니다. 코드를 살펴보겠습니다.React.render( <h1>Hello, world!</h1>,
document.getElementById('container')
);
JSX를 사용하면 템플릿에 JavaScript 변수를 직접 삽입할 수 있습니다. 이 변수가 배열인 경우 배열의 모든 멤버가 확장됩니다. 코드는 다음과 같습니다.
var names = ['Jack', 'Tom', 'Alice'];
React.render( <p>
{
names.map(function (name) { return </p><p>Hello, {name}!</p> })
} ,
document.getElementById('container')
);这里我们声明了一个names数组，然后遍历在前面加上Hello,输出到DOM中，输出结果如下：
표시 결과는 다음과 같습니다.
四、ReactJS组件
1、组件属性
前面说了，ReactJS是基于组件化的开发，下面我们开始来学习ReactJS里面的组件，React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类。
下面，我们来编写第一个组件Greet，有一个name属性，然后输出hello + name的值，代码如下：
var Greet = React.createClass({
render: function() { return <h1>Hello {this.props.name}</h1>; }
});
React.render( <greet></greet>,
document.getElementById('container')
);
看到这段代码，接触过AngularJS的朋友们是不是有一种熟悉的感觉，不过这里有几点需要注意：
1、获取属性的值用的是this.props.属性名
2、创建的组件名称首字母必须大写。
3、为元素添加css的class时，要用className.
4、组件的style属性的设置方式也值得注意，要写成style={{width: this.state.witdh}}
2、组件状态
组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI 。下面我们来编写一个小例子，一个文本框和一个button，通过点击button可以改变文本框的编辑状态，禁止编辑和允许编辑。通过这个例子来理解ReactJS的状态机制。先看代码：
var InputState = React.createClass({
getInitialState: function() { return {enable: false};
},
handleClick: function(event) { this.setState({enable: !this.state.enable});
},
render: function() {
return ( <p>
<input>
<button>Change State</button>
</p> );
}
});
React.render( <inputstate></inputstate>,
document.getElementById('container')
);
这里，我们又使用到了一个方法getInitialState,这个函数在组件初始化的时候执行，必需返回NULL或者一个对象。这里我们可以通过this.state.属性名来访问属性值，这里我们将enable这个值跟input的disabled绑定，当要修改这个属性值时，要使用setState方法。我们声明handleClick方法，来绑定到button上面，实现改变state.enable的值.效果如下：
原理分析：
当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。
这里值得注意的几点如下：
1、getInitialState函数必须有返回值，可以是NULL或者一个对象。
2、访问state的方法是this.state.属性名。
3、变量用{}包裹，不需要再加双引号。
3、组件的生命周期
组件的生命周期分成三个状态：
Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM
React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()
此外，React 还提供两种特殊状态的处理函数。
componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用
下面来看一个例子：
var Hello = React.createClass({
getInitialState: function () { return {
opacity: 1.0
};
},
componentDidMount: function () { this.timer = setInterval(function () { var opacity = this.state.opacity;
opacity -= .05; if (opacity
Hello {this.props.name} );
}
});
React.render( <hello></hello>, document.body
);
上面代码在hello组件加载以后，通过 componentDidMount 方法设置一个定时器，每隔100毫秒，就重新设置组件的透明度，从而引发重新渲染。
4、组件的嵌套
React是基于组件化的开发，那么组件化开发最大的优点是什么？毫无疑问，当然是复用，下面我们来看看React中到底是如何实现组件的复用的，这里我们还写一个例子来说吧，代码如下：
var Search = React.createClass({
render: function() { return ( <p>
{this.props.searchType}:<input>
<button>Search</button>
</p> );
}
}); var Page = React.createClass({
render: function() { return ( <p>
</p><h1>Welcome!</h1>
<search></search>
<search></search>
);
}
});
React.render( <page></page>,
document.getElementById('container')
);
这里我们创建了一个Search组件，然后又创建了一个Page组件，然后我们在Page组件中调用Search组件，并且调用了两次，这里我们通过属性searchType传入值，最终显示结果如图：
五、ReactJs小结
关于ReactJS今天就先学习到这里了，下面来总结一下，主要有以下几点：
1、ReactJs是基于组件化的开发，所以最终你的页面应该是由若干个小组件组成的大组件。
2、可以通过属性，将值传递到组件内部，同理也可以通过属性将内部的结果传递到父级组件(留给大家研究)；要对某些值的变化做DOM操作的，要把这些值放到state中。
3、为组件添加外部css样式时，类名应该写成className而不是class;添加内部样式时，应该是style={{opacity: this.state.opacity}}而不是style="opacity:{this.state.opacity};"。
4、组件名称首字母必须大写。
5、变量名用{}包裹，且不能加双引号。
六、ReactJS优缺点
优点：
React는 매우 빠릅니다
다른 프레임워크와 비교하여 React는 DOM을 운영하는 독특한 방식을 채택합니다.
DOM에서 직접 작동하지 않습니다.
자바스크립트 로직과 실제 DOM 사이에 삽입되는 가상 DOM이라는 개념을 도입합니다.
이 개념은 웹 성능을 향상시킵니다. UI 렌더링 프로세스 중에 React는 가상 DOM의 마이크로 작업을 통해 실제 DOM에 대한 부분 업데이트를 구현합니다.
교차 브라우저 호환성
Virtual DOM은 브라우저 간 문제를 해결하는 데 도움이 되며 IE8에서도 표준화된 API를 제공합니다. 문제 없습니다.
Modularity
프로그램에 독립적인 모듈형 UI 구성 요소를 작성하면 하나 또는 일부 구성 요소에 문제가 있을 때 쉽게 격리할 수 있습니다.
각 구성 요소는 독립적으로 개발 및 테스트할 수 있으며 다른 구성 요소를 도입할 수도 있습니다. 이는 코드 유지 관리 가능성이 향상되는 것과 같습니다.
단방향 데이터 흐름으로 상황이 명확해짐
Flux는 JavaScript 애플리케이션에서 단방향 데이터 계층을 생성하기 위한 아키텍처로 React 뷰의 개발과 함께 개발되었습니다. 도서관. 페이스북 개념. 이는 단지 개념일 뿐 특정 도구의 구현이 아닙니다. 다른 프레임워크에 흡수될 수 있습니다. 예를 들어, 알렉스
Rattray에는 React에서 Backbone의 컬렉션과 모델을 사용하는 멋진 Flux 인스턴스가 있습니다.
순수 JavaScript
최신 웹 애플리케이션은 기존 웹 애플리케이션과 다르게 작동합니다.
예를 들어 뷰 레이어를 업데이트하려면 서버를 요청하지 않고 사용자 상호 작용이 필요합니다. 따라서 뷰와 컨트롤러는 서로 매우 의존적입니다.
많은 프레임워크는 뷰 레이어를 처리하기 위해 핸들바 또는 콧수염과 같은 템플릿 엔진을 사용합니다. 그러나 React는 뷰와 컨트롤러가 타사 템플릿 엔진을 사용하는 대신 서로 의존해야 한다고 믿으며, 가장 중요한 것은 순수한 JavaScript 프로그램이라는 것입니다.
isomorphic JavaScript
단일 페이지 JS 애플리케이션의 가장 큰 단점은 검색 엔진 색인 생성에 큰 제한이 있다는 것입니다. React에는 이에 대한 해결책이 있습니다.
React는 서버에서 애플리케이션을 미리 렌더링한 다음 클라이언트에 보낼 수 있습니다. 사전 렌더링된 정적 콘텐츠의 동일한 기록을 동적 애플리케이션으로 복원할 수 있습니다.
검색 엔진 크롤러는 JavaScript 실행이 아닌 서버측 응답에 의존하기 때문에 애플리케이션을 사전 렌더링하면 SEO에 도움이 됩니다.
React는 다른 프레임워크/라이브러리와 좋은 호환성을 가지고 있습니다
예를 들어 RequireJS는 로딩과 패키징에 사용되는 반면, Browserify와 Webpack은 대규모 애플리케이션을 구축하는 데 적합합니다. 그들은 그러한 어려운 작업을 덜 어렵게 만듭니다.
단점?
React 자체는 V일 뿐이므로 대규모 프로젝트를 위한 완전한 프레임워크를 원한다면 Flux를 도입해야 할 수도 있습니다. 라우팅과 관련된 것입니다.
대부분의 구덩이가 밖으로 나오지 않았습니다
# 🎜🎜# 이 글은 여기에서 끝납니다. (자세한 내용을 보려면 PHP 중국어 웹사이트React 사용자 매뉴얼 열을 참조하세요.) 궁금한 점이 있으면 아래에 메시지를 남겨주세요.
위 내용은 반응은 어떻게 작동하나요? 반응의 작동 원리에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!