程序代写 How React Works

How React Works
Presented by

Copyright By PowCoder代写 加微信 powcoder

React is a Javascript library for building user interfaces.
Released in its recognisable form in
Main ideas are declarative rendering
and components.

What is declarative
rendering?
Contrasts with imperative rendering.

Imperative VS Declarative
Imperative
Specify the process, not the
Declarative
Specify the outcome, not the

Imperative VS Declarative
We have a simple web page
that is blank with a green
background, we are calling

Imperative VS Declarative Page 1

Imperative VS Declarative
How do we create this page
using Javascript?

Imperative VS Declarative
The Imperative Way
Execute the exact steps required to
make the changes
document.body.style.backgroundColor = “green”;

Imperative VS Declarative
Imperative:
Specify the process, not the

Imperative VS Declarative
The Declarative Way
Declare the expected UI and let react figure
out how to make the changes
function App() {

Imperative VS Declarative
Declarative:
Specify the outcome, not the

Imperative VS Declarative
Seems like a lot more code for
the same outcome, why bother?

Imperative VS Declarative
Scenario 2
We now have a second page –
“Page 2” – which has a white
background and three buttons.
We want to transition from Page
1 to Page 2.

Imperative VS Declarative
Page 1 Page 2
Button Button

Imperative VS Declarative
The imperative way –
execute the exact steps for
making the changes
document.body.style.backgroundColor = “white”
const buttonOne = document.createElement(“button”);
const buttonTwo = document.createElement(“button”);
const buttonThree = document.createElement(“button”);
document.body.appendChild(buttonOne);
document.body.appendChild(buttonTwo);
document.body.appendChild(buttonThree);

Imperative VS Declarative
The Declarative Way
Declare the expected
states and let react
figure out how to
make the changes
function App(props) {
if (props.pageType === ‘one’) {