problem: react16 implements asynchronous rendering,
1. What is the principle of this asynchronous rendering implementation?
2. Is it similar to vue"s asynchronous update dom?
if the data changes in vue, vue will turn on queue caching, and then in the next tick of the browser, Vue will start refreshing the queue
and perform the actual (deduplicated) work.
3. So does the asynchronous rendering mentioned by react also refer to the actual operation of updating dom in the next tick?
the subject reads this article:
< H1 > https://zhuanlan.zhihu.com/p/.fellow countrymen.
I knew that setState was asynchronous, but I didn't know its internal mechanism or when render was triggered. In order to read the source code, it is a pity that I have not been able to find out the details of the Fiber update, the difficulty of reading has increased suddenly, until today, I still do not understand all of it, but I have some of my own understanding of the general mechanism. Here, I would like to talk about my personal views. At the same time, I hope to have a great god who knows more about the internal mechanism, such as Szeto Zhengmei.
=
first of all, make it clear that "async" means "re-render is not triggered every time setState". In fact, the upstairs answer is already related to the implementation principle, that is, the essence of setState is to update a queue, and then calculate the state, to trigger the update based on the queue content in the subsequent logic.
take the update process of class component as an example, you can roughly see the specific implementation. Click on the link to view the complete code. Here is an excerpt of the code analysis:
componentWillReceivePropssetStatecwr
re-render is done here. So we can see that setState and render are completely separate. Render will be unified only after the end of the life cycle that should be left behind.
the internal implementation of setState has not been introduced here. You can take a look at it for yourself. You can skip the fiber scheduling section and you can probably see that you are updating the queue. (I'm going for a run. I don't have time to write.)
You can learn about the concepts of updateQuque and transaction machine inreact. Because the fault-tolerant mechanism of react itself is very good, if you trigger the setState operation when you enter the life cycle after setState, react will not report an error, but will push forward to the next batchUpdate and mark a series of dirtyComp, to process again in the subsequent transaction cycle
paste the preact source code for you
function setState(state, callback) {
let s = this.state;
if (!this.prevState) this.prevState = extend({}, s);
extend(s, typeof state==='function' ? state(s, this.props) : state);
if (callback) this._renderCallbacks.push(callback);
enqueueRender(this);
}function enqueueRender(component) {
if (!component._dirty && (component._dirty = true) && items.push(component)==1) {
(options.debounceRendering || defer)(rerender); //
}
}finish
Previous: How react router renders two different child routing components
Next: Java regularization detects whether a string contains characters other than numbers or letters
1. Write the landing page with react, after calling the background data with axios, judge the route of the page to jump according to the return value, how to jump? 2.axios.get ( login login.action?username= +name+ &password= +pd, {) timeout: 1000...
setting in state: this.state = {checkList: []}; checkList initializes it with an array of the same length as JsonPage: this.setState ({checkList:checkSaveCount}); checkSavaCount is the same length as the following JsonPage. the following creates...
import React from react ; class PublicScreen extends React.Component { constructor(props) { super(props); this.getStyle = this.getStyle.bind(this); } getStyle() { const { width = 1920, height = 1080 } = this.pr...
renderdphtmldvareturnapiBackend: apiBackend ...
react projects cannot save store? using redux, data index.js ReactDOM.render( <Provider store={store}> <Router > < Provider>, document.getElementById( root )) registerServiceWorker() actions export const SET_USER = ...
this method is included in the constructor of most components, so what exactly is this method for constructor(props,context){ super(props,context) } ...
use the Table component of Antd Design, first check out the data, and then select a CheckBox, but when you change pages, that CheckBox will not disappear. For example, when I select the first line on the first page, and then skip to the second page, the ...
I can run before packaging without any error reports. This problem occurs after packaging. reports such an error in the browser, using scaffolding made by create-react-app, and the back end is Node.js, backend. No error is reported: packages two diff...
segmentfault dvaws.open().websocketwebsocketws ws.openfetchGETloginsendfetchCOOKIECOOKIEFETCHCOOKIECOOKIE ...
...
now we need to develop a website to generate front-end pages based on the node ID saved in the database. For example, the json data is: let data=[ {"id":1,"pid":0,"type":"div"}, {"id":2,"pi...
I pass values through redux scenario is when I click on the navigation bar of component 1 and refresh the ajax of component 2 is the data returned by ajax accepted by this.state.contnet what should I write? There is an urgent need for ideas. ...
official example of full copy: this is the official sample code: import { Select } from antd ; const Option = Select.Option; function handleChange(value) { console.log(`selected ${value}`); } ReactDOM.render( <div> <Select defaul...
how to use react to change the value of Input < hr > export default class myForm extends Component{ constructor(props){ super(props); this.state = { id: , }; } change=()=>{ var idIn...
want to set the meta tag to solve the adaptive problem <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> meta LOGO ...
use list as the option data source for Select, but use callback, which cannot be rendered. Just call it directly, as shown in the figure below. The first method is fine, and the second is not. Because there are many Select, on a page, you need to use th...
< H1 > github address < H1 > error will be reported when using npm run dev const path = require( path ); const merge = require( webpack-merge ); const common = require( . webpack.common.js ); dev-server let BundleAnalyzerPlugin = require( ...
import React from react ; import ReactDOM from react-dom ; import . assets styles index.less ; import Green from . assets images green.png ; import Red from . assets images red.png ; class Circle extends React.Component { constructor...
There are two areas in the State and Lifecycle section that I don t quite understand 1. State Updates are Merged The merging is shallow, so this.setState ({comments}) leaves this.state.posts intact, but completely replaces this.state.comments. ...
like this [array [xxx], array [xxx], array [xxx].] merge all xxx in array into one array [xxx.] ...