React의 전반적인 프로세스는 무엇입니까? React의 전반적인 과정 소개(예제 포함)
- 寻∝梦원래의
- 2018-09-11 12:04:261869검색
이 글에서는 주로 react의 전반적인 과정을 소개합니다. 이 글을 함께 살펴보겠습니다
React의 컴포넌트화
React의 컴포넌트는 당연히 DOM 뷰와 상태 데이터로 구성되어 있는데, 두 부분은 별개입니다. 상태는 데이터 센터이며 해당 상태에 따라 뷰의 상태가 결정됩니다. 이번에는 우리가 늘 동경해왔던 MVC 개발 모델과 조금 다른 것 같다는 것을 깨달았습니다. 컨트롤러가 없으면 사용자 상호작용을 어떻게 처리하고 데이터 변경을 누가 관리하게 될까요? 그러나 이는 React가 관심을 가져야 할 사항이 아니며 UI 렌더링만 담당합니다. 데이터를 수신하고 동적으로 DOM을 변경하는 다른 프레임워크와 달리 React는 setState를 사용하여 뷰 업데이트를 제어합니다. setState는 자동으로 렌더링 함수를 호출하여 뷰의 다시 렌더링을 트리거합니다. setState를 호출하지 않고 상태 데이터만 변경된 경우 업데이트를 트리거하지 않습니다. 컴포넌트는 독립적인 기능을 가진 뷰 모듈입니다. 작은 컴포넌트들이 모여서 큰 컴포넌트가 되고, 전체 페이지가 컴포넌트로 구성됩니다. 그 장점은 재사용과 유지 관리입니다.
react의 Diff 알고리즘
React의 Diff 알고리즘은 어디에 사용되나요? 컴포넌트가 업데이트되면 React는 새로운 가상 DOM 트리를 생성하고 이를 이전에 저장된 DOM 트리와 비교합니다. 이 프로세스는 diff 알고리즘을 사용하므로 컴포넌트가 초기화될 때 사용되지 않습니다. React는 동일한 구성요소가 유사한 구조를 갖고, 다른 구성요소는 다른 구조를 갖는다고 가정합니다. 이 가정을 기반으로 레이어별 비교를 수행하여 해당 노드가 다른 것으로 확인되면 이전 노드와 포함된 모든 하위 노드를 직접 삭제하고 새 노드로 교체합니다. 동일한 노드인 경우 속성만 변경됩니다.
리스트의 diff 알고리즘은 약간 다릅니다. 리스트는 일반적으로 동일한 구조를 갖기 때문입니다. 리스트 노드를 삭제, 삽입, 정렬할 때 각 교체를 하나씩 비교하는 것보다 단일 노드의 전반적인 작업이 훨씬 낫습니다. 목록을 작성하려면 React가 누가 누구인지 알 수 있도록 키 값을 설정해야 합니다. 물론 키 값을 쓰지 않을 수도 있지만, 이는 일반적으로 반응 성능을 향상시키기 위해 키 값을 추가하라는 경고를 표시합니다.
리액트 컴포넌트는 어떻게 탄생했나요?
컴포넌트 생성 방법은 React.createClass() - 클래스를 생성합니다. 리액트 시스템은 내부적으로 클래스 시스템을 설계하고 이를 사용하여 리액트 컴포넌트를 생성합니다. 그러나 이것이 꼭 필요한 것은 아닙니다. es6 클래스를 사용하여 구성 요소를 만들 수도 있습니다. 이는 Facebook에서 공식적으로 권장하는 작성 방법이기도 합니다.
두 가지 작성 방법은 동일한 기능을 달성하지만 원리는 다릅니다. es6 클래스 클래스는 생성자 함수로 볼 수 있으며 확장은 다음과 같습니다. 클래스 간 상속 - React.Component의 모든 속성과 메서드를 상속하는 Main 클래스를 정의합니다. 여기에서 구성 요소의 수명 주기 기능이 시작됩니다. 생성자는 객체를 인스턴스화할 때 호출되는 생성자입니다. Super는 부모 클래스의 생성자를 호출하여 부모 클래스의 인스턴스 객체를 생성한 다음 하위 클래스의 생성자를 사용하여 이를 수정합니다. 이는 es5의 프로토타입 상속과 다릅니다. 프로토타입 상속은 먼저 인스턴스화된 객체를 생성한 다음 부모의 프로토타입 메서드를 상속합니다. 이것을 이해하고 나면 구성 요소를 볼 때 훨씬 더 명확해질 것입니다.
구성요소 을 사용하면 실제로는 Main 클래스(새 Main)의 인스턴스화이지만 React는 이 프로세스를 캡슐화하여 라벨처럼 보이게 만듭니다. (자세한 내용을 보려면 PHP 중국어 웹사이트React 참조 매뉴얼 열을 참조하세요.)
주의할 점은 세 가지입니다. 1. 정의된 클래스 이름의 첫 글자는 대문자로 표기해야 합니다. 2. 클래스에는 키워드가 되면 클래스 선택기는 대신 className을 사용해야 합니다. 3. 클래스와 모듈은 기본적으로 strict 모드를 사용하므로 use strict를 사용하여 실행 모드를 지정할 필요가 없습니다.
구성 요소의 수명 주기
구성 요소는 초기화 중에 5개의 후크 기능을 트리거합니다:
1, getDefaultProps()
기본 props 설정 dufaultProps를 사용하여 구성 요소의 기본 속성을 설정할 수도 있습니다.
2.getInitialState()
es6 클래스 구문을 사용할 때 이러한 후크 기능이 없습니다. , 생성자에서 직접 this.state를 정의할 수 있습니다. 이제 This.props에 액세스할 수 있습니다.
3.ComponentWillMount()
은 구성 요소가 초기화될 때만 호출되며, 나중에 구성 요소가 업데이트될 때 호출됩니다. 라이프 사이클에서 한 번만 호출되며 이때 상태를 수정할 수 있습니다.
4.render()
react 가장 중요한 단계는 가상 돔을 만들고 diff를 수행하는 것입니다. 알고리즘을 사용하면 DOM 트리 업데이트가 여기에서 수행됩니다. 이 시점에서는 상태를 변경할 수 없습니다.
5.commentDidMount()
은 컴포넌트가 렌더링된 후에 호출되며 이를 통해 얻을 수 있습니다. .getDOMNode() 그리고 dom 노드를 작동하고 한 번만 호출합니다.
은 업데이트 시 5개의 후크 기능도 트리거합니다:
6, componentWillReceivePorps(nextProps)# 🎜🎜 #
은 구성 요소가 초기화될 때 호출되지 않지만 구성 요소가 새 prop을 허용할 때 호출됩니다.
7. shouldComponentUpdate(nextProps, nextState)
react 성능 최적화는 매우 중요한 부분입니다. 구성 요소가 새 상태 또는 props를 허용할 때 호출됩니다. 비교 전과 후의 두 prop과 상태가 동일한지 여부를 설정할 수 있습니다. 동일한 속성 상태는 확실히 동일하므로 업데이트를 방지하기 위해 false를 반환합니다. DOM 트리, 그래서 필요가 없습니다. 새로운 DOM 트리를 생성하고 이전 DOM 트리를 diff 알고리즘과 비교하면 특히 DOM 구조가 복잡한 경우 많은 성능을 절약할 수 있습니다. 그러나 this.forceUpdate를 호출하면 이 단계를 건너뜁니다.
8, componentWillUpdata(nextProps, nextState)
은 호출되지 않습니다. 이때는 state
9, render()을 수정할 수 있습니다.
할 말이 많지 않습니다
10.comComponentDidUpdate()
은 구성 요소가 초기화될 때 호출되지 않습니다. 구성 요소 업데이트가 완료된 후에 호출됩니다. 이는 dom 노드를 가져올 수 있습니다.제거 후크 기능도 있습니다
11.commentWillUnmount()
는 구성 요소가 마운트 해제되려고 할 때 호출됩니다. 이때 일부 이벤트 리스너와 타이머를 지워야 합니다.
위에서 볼 수 있듯이, React에는 총 10개의 주기적 기능이 있습니다(렌더링은 한 번 반복됩니다). 이 10가지 기능은 구성 요소 작업에 대한 모든 요구 사항을 충족할 수 있으며, 잘 사용하면 개발 효율성과 구성 요소 성능을 향상시킬 수 있습니다. .
react-router
Router와 Route는 React의 구성 요소입니다. 렌더링되지 않습니다. 이는 내부 라우팅 규칙을 생성하고 일치하는 라우팅 주소에 따라 해당 구성 요소를 표시하는 구성 개체일 뿐입니다. 경로는 라우팅 주소와 구성 요소를 바인딩합니다. 경로에는 라우팅 주소의 포함 관계를 나타내는 중첩 기능이 있습니다. 이는 구성 요소 간의 중첩과 직접적인 관련이 없습니다. 경로는 바인딩된 구성 요소에 하위, 기록, 위치, 매개변수, 경로, 경로 매개변수, 경로 등 7가지 속성을 전달할 수 있습니다. 가장 일반적으로 사용되는 것은 하위(라우팅의 포함 관계로 구별되는 구성 요소), 위치(주소, 매개 변수, 주소 전환 방법, 키 값, 해시 값 포함)입니다. React-router는 a 태그를 캡슐화한 Link 태그를 제공합니다. React-router는 a 태그의 기본 동작을 방지하고 pushState를 사용하여 이동하는 링크를 클릭하는 것이 아니라는 점에 유의할 가치가 있습니다. 해시 값을 변경합니다. 페이지 전환 과정은 Link 라벨이나 Back Forward 버튼을 클릭하면 URL 주소가 먼저 변경되며, 라우터는 주소 변경을 모니터링하고 Route의 경로 속성에 따라 해당 구성 요소와 일치시켜 상태를 변경합니다. 값을 해당 구성 요소에 추가하고 setState를 호출하면 렌더링 함수가 dom을 다시 렌더링하도록 트리거됩니다.
페이지가 많으면 프로젝트가 점점 더 커지게 됩니다. 특히 단일 페이지 애플리케이션의 경우 초기 렌더링 속도가 매우 느려지므로 요청 시 페이지로 전환할 때만 로드해야 합니다. . 해당 js 파일을 로드합니다. webpack을 사용하여 요청 시 로드에 반응하는 방법은 매우 간단합니다. Route의 구성 요소를 getComponent로 변경하고, require.ensure를 사용하여 구성 요소를 얻은 후 webpack에서 ChunkFilename을 구성합니다.
const chooseProducts = (location, cb) => {
require.ensure([], require => {
cb(null, require('../Component/chooseProducts').default)
},'chooseProducts')
}
const helpCenter = (location, cb) => {
require.ensure([], require => {
cb(null, require('../Component/helpCenter').default)
},'helpCenter')
}
const saleRecord = (location, cb) => {
require.ensure([], require => {
cb(null, require('../Component/saleRecord').default)
},'saleRecord')
}
const RouteConfig = (
<router>
<route>
<indexroute></indexroute>//首页
<route></route>
<route></route>//帮助中心
<route></route>//销售记录
<redirect></redirect>
</route>
</router>
);
컴포넌트 간 통신
React는 단방향 데이터 흐름을 촉진하고 위에서 아래로 데이터를 전송합니다. 그러나 상향식이거나 동일한 데이터 흐름에 있지 않은 컴포넌트 간의 통신은 복잡해집니다. 통신 문제를 해결하는 방법은 여러 가지가 있는데, 부모-자식 관계만 있는 경우 부모는 콜백 함수를 자식에게 속성으로 전달하고, 자식은 해당 함수를 직접 호출하여 부모와 통신할 수 있습니다.
구성 요소 수준이 깊게 중첩되면 Context를 사용하여 정보를 전달할 수 있습니다. 이렇게 하면 계층별로 함수를 전달할 필요가 없습니다. 모든 수준의 하위 항목은 this.context를 통해 직접 액세스할 수 있습니다.
형제 관계에 있는 구성 요소는 서로 직접 통신할 수 없습니다. 동일한 계층의 상위 항목만 환승 스테이션으로 사용할 수 있습니다. 그리고 형제 컴포넌트가 최상위 컴포넌트인 경우 서로 통신하려면 외부 레이어에 또 다른 컴포넌트 레이어가 있어야 하는데, 이 외부 컴포넌트가 데이터를 저장하고 정보를 전송하는 역할을 하는 것입니다. 합니다.
구성요소 간의 정보는 글로벌 이벤트를 통해서도 전달될 수 있습니다. 다른 페이지는 매개변수를 통해 데이터를 전달할 수 있으며, 다음 페이지는 location.query를 사용하여 얻을 수 있습니다.
먼저 redux에 대해 이야기해 보겠습니다.
redux는 주로 저장, 감속기, 동작의 세 부분으로 구성됩니다.
store은 객체이며 4가지 주요 메서드가 있습니다:
1. 디스패치:
用于action的分发——在createStore中可以用middleware中间件对dispatch进行改造，比如当action传入dispatch会立即触发reducer，有些时候我们不希望它立即触发，而是等待异步操作完成之后再触发，这时候用redux-thunk对dispatch进行改造，以前只能传入一个对象，改造完成后可以传入一个函数，在这个函数里我们手动dispatch一个action对象，这个过程是可控的，就实现了异步。
2、subscribe：
监听state的变化——这个函数在store调用dispatch时会注册一个listener监听state变化，当我们需要知道state是否变化时可以调用，它返回一个函数，调用这个返回的函数可以注销监听。
let unsubscribe = store.subscribe(() => {console.log('state发生了变化')})
3、getState：
获取store中的state——当我们用action触发reducer改变了state时，需要再拿到新的state里的数据，毕竟数据才是我们想要的。getState主要在两个地方需要用到，一是在dispatch拿到action后store需要用它来获取state里的数据，并把这个数据传给reducer，这个过程是自动执行的，二是在我们利用subscribe监听到state发生变化后调用它来获取新的state数据，如果做到这一步，说明我们已经成功了。
4、replaceReducer:
替换reducer，改变state修改的逻辑。
store可以通过createStore()方法创建，接受三个参数，经过combineReducers合并的reducer和state的初始状态以及改变dispatch的中间件，后两个参数并不是必须的。store的主要作用是将action和reducer联系起来并改变state。
action是一个对象，其中type属性是必须的，同时可以传入一些数据。action可以用actionCreactor进行创造。dispatch就是把action对象发送出去。
reducer是一个函数，它接受一个state和一个action，根据action的type返回一个新的state。根据业务逻辑可以分为很多个reducer，然后通过combineReducers将它们合并，state树中有很多对象，每个state对象对应一个reducer，state对象的名字可以在合并时定义。
像这个样子：
const reducer = combineReducers({
a: doSomethingWithA,
b: processB,
c: c
})
combineReducers其实也是一个reducer，它接受整个state和一个action，然后将整个state拆分发送给对应的reducer进行处理，所有的reducer会收到相同的action，不过它们会根据action的type进行判断，有这个type就进行处理然后返回新的state，没有就返回默认值，然后这些分散的state又会整合在一起返回一个新的state树。
接下来分析一下整体的流程，首先调用store.dispatch将action作为参数传入，同时用getState获取当前的状态树state并注册subscribe的listener监听state变化，再调用combineReducers并将获取的state和action传入。combineReducers会将传入的state和action传给所有reducer，reducer会根据state的key值获取与自己对应的state，并根据action的type返回新的state，触发state树的更新，我们调用subscribe监听到state发生变化后用getState获取新的state数据。
redux的state和react的state两者完全没有关系，除了名字一样。
上面分析了redux的主要功能，那么react-redux到底做了什么？
react-redux
如果只使用redux，那么流程是这样的：
component --> dispatch(action) --> reducer --> subscribe --> getState --> component
用了react-redux之后流程是这样的：
component --> actionCreator(data) --> reducer --> component
store的三大功能：dispatch，subscribe，getState都不需要手动来写了。react-redux帮我们做了这些，同时它提供了两个好基友Provider和connect。
Provider是一个组件，它接受store作为props，然后通过context往下传，这样react中任何组件都可以通过contex获取store。也就意味着我们可以在任何一个组件里利用dispatch(action)来触发reducer改变state，并用subscribe监听state的变化，然后用getState获取变化后的值。但是并不推荐这样做，它会让数据流变的混乱，过度的耦合也会影响组件的复用，维护起来也更麻烦。
connect --connect(mapStateToProps, mapDispatchToProps, mergeProps, options)是一个函数，它接受四个参数并且再返回一个函数--wrapWithConnect，wrapWithConnect接受一个组件作为参数wrapWithConnect(component)，它内部定义一个新组件Connect(容器组件)并将传入的组件(ui组件)作为Connect的子组件然后return出去。
所以它的完整写法是这样的：connect(mapStateToProps, mapDispatchToProps, mergeProps, options)(component)
mapStateToProps(state, [ownProps])：
mapStateToProps 接受两个参数，store的state和自定义的props，并返回一个新的对象，这个对象会作为props的一部分传入ui组件。我们可以根据组件所需要的数据自定义返回一个对象。ownProps的变化也会触发mapStateToProps
function mapStateToProps(state) {
return { todos: state.todos };
}
mapDispatchToProps(dispatch, [ownProps])：
mapDispatchToProps如果是对象，那么会和store绑定作为props的一部分传入ui组件。如果是个函数，它接受两个参数，bindActionCreators会将action和dispatch绑定并返回一个对象，这个对象会和ownProps一起作为props的一部分传入ui组件。所以不论mapDispatchToProps是对象还是函数，它最终都会返回一个对象，如果是函数，这个对象的key值是可以自定义的
function mapDispatchToProps(dispatch) {
return {
todoActions: bindActionCreators(todoActionCreators, dispatch),
counterActions: bindActionCreators(counterActionCreators, dispatch)
};
}
mapDispatchToProps返回的对象其属性其实就是一个个actionCreator，因为已经和dispatch绑定，所以当调用actionCreator时会立即发送action，而不用手动dispatch。ownProps的变化也会触发mapDispatchToProps。
mergeProps(stateProps, dispatchProps, ownProps)：
mapStateToProps() 및 mapDispatchToProps()에서 반환된 객체와 구성 요소 자체 prop을 결합하여 새 prop으로 구성 요소에 전달합니다. Object.sign({}, ownProps, stateProps, dispatchProps)의 결과는 기본적으로 반환됩니다.
options:
pure = true는 Connect 컨테이너 구성 요소가 상태와 상태를 업데이트함을 의미합니다. shouldComponentUpdate OwnProps의 저장소는 얕은 비교를 수행하여 변경 사항이 발생했는지 확인하고 성능을 최적화합니다. false인 경우 비교가 수행되지 않습니다.
사실 대부분의 로직은 반환하는 WrapWithConnect 함수 내에서 구현됩니다. 정확하게 말하자면, 이는 WrapWithConnect 내에 정의된 Connect 구성 요소에서 구현됩니다.
다음은 완전한 반응 --> redux --> 반응 프로세스입니다:
1. Provider 구성 요소는 redux 저장소를 props로 받아들인 다음 종료됩니다. 컨텍스트 패스를 통해.
2. 연결 함수는 초기화 중에 mapDispatchToProps 객체를 저장소에 바인딩합니다. mapDispatchToProps가 함수인 경우 Connect 구성 요소가 저장소를 얻은 후 수신 저장소에 따라 바인딩ActionCreators를 통해 바인딩됩니다. 디스패치 및 액션이 결정된 후 반환된 객체를 저장소에 바인딩합니다. 동시에, WrapWithConnect가 호출되고 UI 구성 요소가 전달됩니다. WrapWithConnect는 내부적으로 Connect 확장을 사용합니다. 구성 요소는 Connect 구성 요소를 정의합니다. 그런 다음 Connect 구성 요소는 컨텍스트를 통해 저장소를 가져오고 store.getState를 통해 상태를 전달하고 stateProps 개체인 mapDispatchToProps를 반환합니다. object 또는 mapDispatchToProps 함수는 dispatchProps 개체를 반환합니다. stateProps, dispatchProps 및 Connect 구성 요소는 Object.sign() 또는 mergeProps를 통해 props로 병합되고 ui 구성 요소에 전달됩니다. 그런 다음 ComponentDidMount에서 store.subscribe를 호출하고 콜백 함수 handlerChange를 등록하여 상태 변경을 모니터링합니다.
3 이때 ui 구성 요소는 props에서 actionCreator를 찾을 수 있으며, 디스패치에서는 전체 상태를 가져오기 위해 자동으로 호출됩니다. 상태 변경을 수신하기 위해 리스너가 등록되고, 저장소는 획득한 상태와 작업을 CombineReducers에 전달합니다. CombineReducers는 상태의 키 값에 따라 상태를 하위 감속기에 전달하고 작업을 전달합니다. 모든 하위 감속기에 대해 감속기는 action.type을 판단하기 위해 순차적으로 실행됩니다. 있는 경우 새 상태를 반환하고, 없는 경우 기본값을 반환합니다. CombineReducers는 하위 리듀서가 반환한 개별 상태를 새로운 완전한 상태로 다시 결합합니다. 이때 상태가 변경되었습니다. Connect 구성 요소에서 호출된 구독은 상태 변경을 수신한 다음 내부적으로 handlerChange 함수를 호출하여 새 상태 값을 얻고 이전 상태와 새 상태 간의 얕은 비교를 수행합니다. 동일하면 직접 반환하고, 다르면 mapStateToProps를 호출합니다. stateProps를 가져오고 이전 상태와 새 stateProps를 간단히 비교합니다. 동일하면 후속 작업 없이 직접 반환하고 종료합니다. 동일하지 않은 경우 this.setState()를 호출하여 Connect 구성 요소의 업데이트를 트리거하고 ui 구성 요소를 전달한 다음 ui 구성 요소의 업데이트를 트리거합니다. 이때 ui 구성 요소는 새로운 props를 가져오고 반응합니다. --> redux --> 일회성 반응 프로세스가 종료됩니다.
위의 내용은 약간 복잡합니다. 프로세스를 단순화한 버전은 다음과 같습니다.
1. Provider 구성 요소는 redux 저장소를 props로 허용합니다. , 그런 다음 다운로드 컨텍스트를 통해 해당 항목으로 이동합니다.
2. 연결 함수는 Provider로부터 저장소를 받은 다음 mapStateToProps, mapDispatchToProps 및 구성 요소 세 가지 매개 변수를 허용하고 상태 및 actionCreator를 구성 요소에 props로 전달합니다. actionCreator 함수 새 상태를 반환하도록 리듀서 함수를 트리거하기 위해 connect는 상태 변경을 모니터링하고 setState를 호출하여 구성 요소를 업데이트하고 새 상태를 구성 요소에 전달합니다.
connect는 매우 간결하게 작성할 수 있습니다. mapStateToProps 및 mapDispatchToProps는 전달된 콜백 함수일 뿐입니다. 연결 함수는 필요할 때 호출합니다. 이름은 고정되어 있지 않으며 이름을 작성할 필요도 없습니다.
간단한 버전: connect(state => state, action)(Component);
Project construction
위에 언급된 반응, 반응- 라우터 및 redux에 대한 지식 포인트. 하지만 이들을 통합하여 완전한 프로젝트를 구축하는 방법은 무엇입니까?
1. 먼저 React.js, redux, React-router 등 기본 파일을 인용합니다. npm으로 설치하고 파일에 직접 인용하는 것이 좋습니다.
2. React.js, redux, React-router에서 필요한 객체와 메소드를 소개합니다.
import React, {Component, PropTypes} from 'react';
import ReactDOM, {render} from 'react-dom';
import {Provider, connect} from ' React-redux';
import 'redux'에서 {createStore, CombineReducers, applyMiddleware};
import 'react-router'에서 { Router, Route, Redirect, IndexRoute, browserHistory, hashHistory };#🎜🎜 #
# 🎜🎜# 구성 요소에 대한 사용자 정의 속성 1개, actionCreator에서 반환된 객체 6개 리듀서에서 반환된 상태 4개, Connect 구성 요소의 속성 0개, 라우터에서 주입된 속성 7개입니다.
React에서 접하게 되는 함정과 몇 가지 지식 사항을 요약해 보세요
React를 사용하다 보면 다양한 문제에 자주 부딪히게 됩니다. 다음으로, 리액션에서 쉽게 접할 수 있는 문제와 주의점을 분석해 보겠습니다.
1. setState()는 비동기적입니다.
this.setState()는 렌더링 메서드를 호출하지만 상태 값은 렌더링 메서드에 즉시 변경되지 않습니다. 따라서 this.setState() 실행 직후 얻은 상태 값은 변경되지 않습니다. 동일한 상태 직접 할당은 렌더링 함수가 호출되지 않기 때문에 업데이트를 트리거하지 않습니다.
2. 구성 요소 수명 주기
comComponentWillReceivePorps, shouldComponentUpdate, componentWillUpdata, componentDidUpdate는 초기화 중에는 호출되지 않고 구성 요소가 업데이트될 때만 호출됩니다.
3. 리듀서는 구성요소 업데이트를 시작하기 위해 새 객체를 반환해야 합니다.
4. 리듀서가 반환한 상태가 변경되는지 여부에 관계없이 구독에 등록된 모든 콜백 함수가 트리거됩니다.
5. 컴포넌트 이름의 첫 글자는 대문자로 표기해야 합니다.
6. 구성 요소를 제거하기 전에 dom 요소에 추가된 청취 이벤트 및 타이머를 수동으로 지워야 합니다. 이는 반응 제어 범위 내에 있지 않고 수동으로 지워야 하기 때문입니다.
7. 온디맨드 로드 시 기본값 내보내기를 통해 컴포넌트가 노출되는 경우 require.ensure에 기본값을 추가해야 합니다.
require.ensure([], require => {
cb(null, require('../Component/saleRecord').default)
},'saleRecord')
8、react的路由有hashHistory和browserHistory，hashHistory由hash#控制跳转，一般用于正式线上部署，browserHistory就是普通的地址跳转，一般用于开发阶段。
9、标签里用到的，for 要写成htmlFor，因为for已经成了关键字。
10、componentWillUpdate中可以直接改变state的值，而不能用setState。
11、如果使用es6class类继承react的component组件，constructor中必须调用super，因为子类需要用super继承component的this，否则实例化的时候会报错。
本篇文章到这就结束了（想看更多就到PHP中文网React使用手册栏目中学习），有问题的可以在下方留言提问。
위 내용은 React의 전반적인 프로세스는 무엇입니까? React의 전반적인 과정 소개(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!