Much of the information in this article comes from MDN. You can go to the further reading section for more details.
A BFC(block formatting context) is a mini layout system on your page. Everything in the BFC will not interfere with the outer world.
It is worth mentioning that a Flex/Grid container element can create a Flex/Grid formatting context, which is very similar to a BFC except they cannot have floating child elements. However, using Flex and Grid can still solve external float and margin collapse problems.
There are multiple ways to create a BFC. …
What is React component lifecycle? You can think of the lifecycle as the different stages of a component from birth to death.
It is called before mounting the component into DOM.
It is the place where you initialize the local state and binds event methods.
The render method is the only required method in a class component. It should be noted that it is different from the ReactDOM.render().
Component.render() takes no arguments and returns the corresponding React element tree for the component. Component.render() is called when the component’s state or props change and shouldComponentUpdate() lifecycle method return…
React hooks hook out great features of react for your to use in functional components.
Hooks are functions that hook into react state and lifecycle features from the function component. It does not work in class components.
It sounds odd, but the theory is pretty simple.
Lets’s take a look at how debounce and throttle works first.
This a pretty simple realization of debounce and throttle. In the product environment, you should use Lodash or other similar strictly library.
Webpack’s flexibility is mainly due to its configuration file, which describes how to transform assets of the graphs and what output it should produce. The default config file named webpack.config.js, …
There are couple of types of XSS: reflected, stored, dom-based, and mutation XSS.
First, one is reflected XSS, which simply reflected script tags in the response. The browser identifies these code as a script block and executes them.
HTTP devices can keep copies of popular documents. Maintaining a cache of the previous resources allows the client to use a local copy of the resource, thereby eliminating unnecessary HTTP requests.
Normally, making an HTTP cache is about three HTTP headers: Cache-control, Last-modified, and Etag. They all available in both the request header and response header.
Two things need to be born in mind:
Specifying a lifetime for each…
Middleware, a extra step where async logics run.
Redux store itself don’t know anything about async logic. It only knows how to synchronously dispatch actions, update the state by calling the root reducer, and notify the ui which needs to be updated. Any asynchronicity happen outside the store.
Redux middleware, on the other side, allow you to using async logics to interact with the store. Middleware has access to dispatch and getState, which means you could write async functions in the middleware, and still has the ability to interact with the redux store by dispatching actions.
There are three concepts…
The React docs state:
In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself.
Form elements, includes input, select, text area. They all keep a internal state and updates every time the user provides input.
Controlled component(recommended way):
React is the one who controlled these form elements. More specifically, react is in charge of controlling when and how to render it based on the internal logic of setState method.
A front-end developer who likes designing stuffs. Technical blog rookie. Loving sharing.