amirho/react.dev
1
0
Fork 0
mirror of https://github.com/reactjs/react.dev.git synced 2026-02-25 23:05:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add new docs website (#10896)

Browse Source 
Adds a new docs website, built with Gatsby JS, to replace the old Jekyll site. Source code for the new site lives in /www (although markdown and YML data still comes from the legacy /docs folder).

Changes to either markdown or website source code can be previewed on Netlify. The react-js bot should automatically add comments to each PR with preview links. (This preview is generated by running the newly-added yarn build:docs command in the root package.json.)

The majority of the changes in this PR are contained within the new /www directory. However some minor modifications have been made to existing content in the /docs directory:

* Modified frontmatter author block to always be an array
* Small markdown formatting tweaks
This commit is contained in:
Brian Vaughn
2017-09-28 10:18:04 -07:00
committed by GitHub
parent 6b31453ef6
commit 52b694eaae
177 changed files with 1872 additions and 1972 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/optimizing-performance.md
View File

@@ -15,11 +15,11 @@ By default, React includes many helpful warnings. These warnings are very useful
If you aren't sure whether your build process is set up correctly, you can check it by installing [React Developer Tools for Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi). If you visit a site with React in production mode, the icon will have a dark background:
<img src="/react/img/docs/devtools-prod.png" style="max-width:100%" alt="React DevTools on a website with production version of React">
<img src="../img/docs/devtools-prod.png" style="max-width:100%" alt="React DevTools on a website with production version of React">
If you visit a site with React in development mode, the icon will have a red background:
<img src="/react/img/docs/devtools-dev.png" style="max-width:100%" alt="React DevTools on a website with development version of React">
<img src="../img/docs/devtools-dev.png" style="max-width:100%" alt="React DevTools on a website with development version of React">
It is expected that you use the development mode when working on your app, and the production mode when deploying your app to the users.
@@ -164,7 +164,7 @@ Remember that you only need to do this for production builds. You shouldn't appl
In the **development** mode, you can visualize how components mount, update, and unmount, using the performance tools in supported browsers. For example:
<center><img src="/react/img/blog/react-perf-chrome-timeline.png" style="max-width:100%" alt="React components in Chrome timeline" /></center>
<center><img src="../img/blog/react-perf-chrome-timeline.png" style="max-width:100%" alt="React components in Chrome timeline" /></center>
To do this in Chrome:
@@ -203,7 +203,7 @@ If you know that in some situations your component doesn't need to update, you c
Here's a subtree of components. For each one, `SCU` indicates what `shouldComponentUpdate` returned, and `vDOMEq` indicates whether the rendered React elements were equivalent. Finally, the circle's color indicates whether the component had to be reconciled or not.
<figure><img src="/react/img/docs/should-component-update.png" style="max-width:100%" /></figure>
<figure><img src="../img/docs/should-component-update.png" style="max-width:100%" /></figure>
Since `shouldComponentUpdate` returned `false` for the subtree rooted at C2, React did not attempt to render C2, and thus didn't even have to invoke `shouldComponentUpdate` on C4 and C5.