"React Essence" Reading Notes

Overview

A few days ago, I looked for the technical books of react, and found "React Essence" and "React and Redux in a Simple Way" . Since "The Essence of React" was written by a foreigner , and I also like the translator Qi Dance Troupe , I read this book. But to be honest, the book is a bit outdated, but the basic ideas and methods in it are very interesting and exactly what I need. So I recorded them for reference in future development, I believe it will be useful to others as well.

PS: Don't read the first chapter, it's too old! ! !

separation of concerns

The reason why we use three different technologies to write web applications is html, css and js because we want to separate three different concerns :

• content (html)
• styles (css)
• logic (js)

web pages and single page applications

Web pages and single-page applications are where a single-page application uses the Javascript DOM API provided by the web browser to manipulate the DOM to create additional elements after the Document Object Model (DOM) is loaded .

However, there are 2 problems with manipulating the DOM via javascript:

1. Programming style is important, and different programming styles can make codebases difficult to maintain.
2. DOM changes are slow .

So, under what circumstances do we manipulate the DOM?

1. User events : user presses the keyboard, clicks the mouse, scrolls the screen, scales the page size, etc.
2. Server-side events : The application receives data or errors from the server, etc.

some built-in functions

React.createElement has a children parameter that describes the child elements this element should contain (if any exist).

React has some built-in functions to create common HTML tags , such as React.DOM.ul(), React.DOM.li(), React.DOM.div(), etc.

ReactDOM.render() is the function that renders the virtual DOM to the real DOM in react, and its third parameter can receive a callback function.

Client-side rendering and server-side rendering

The general react page is a client-side rendering page, which is very slow when it is first opened for the following reasons:

1. It needs to render the virtual DOM in the browser and update it to the real DOM.
2. It often needs to wait for some data from the server to update the DOM.

So, technically, we can use the React library on the server and create a tree of ReactNodes , render it as a string, and send it to the client.

//服务端渲染成字符串
var ReactDOMServer = require('react-dom/server');
ReactDOMServer.renderToString(ReactElement);

//服务端渲染成静态页面
var ReactDOMServer = require('react-dom/server');
ReactDOMServer.renderToStaticMarkup(ReactElement);

Another benefit of using server-side rendering is the ease of SEO .

event handling

React doesn't bind event handlers to the DOM node itself . Instead, it just uses an event listener at the top level to listen for all events and delegate them to the corresponding event handlers.

state

We have to ask ourselves this question: what should we not put in state?

What data can we remove from the component's state without affecting the user's page update? Ask yourself to delete data until you are absolutely sure there is nothing left to delete without affecting the normal update of the user interface.

Planning React

There are two simple principles to follow when planning a React application:

• Each React component should represent a user interface element. It should encapsulate the smallest reusable element .
• Multiple React components should be grouped into independent React components. Ultimately, the entire user page should be encapsulated into a React component.

built-in styles

You can make some styles that do not need to be changed as built-in styles , but use camel case and class should be changed to className.

var headerStyle = {
    fontSize: '16px',
    fontWeight: '300',
    display: 'inline-block',
    margin: '20px 10px'
};

<h2 style={headerStyle}>fasdfdf</h2>

Validate properties of React components

Use React.PropTypes to validate React component properties. (PropTypes are only used in the development version of React for performance reasons)

change data

How can we change parent component's data in child component ?

The parent component passes a callback function to the child component, and the child component modifies the data of the parent component by calling this callback function.

ref

React components have a ref property through which the component can be referenced outside the render function.

<input
    ref="collectionName" />

componentDidMount: function() {
    this.refs.collectionName.focus();
}