Start copying a website. Write down any thoughts or stumbles you encounter during the process.

1. styled component

Because CSS is global, class name conflicts and global pollution often occur. Tools like Gravitation-Component, on the other hand, can write CSS-in-JS style code that declares CSS as a component so that it is used only where it is intended.

1.1 Attribute Transmission

You can pass values to the CSS using props:

const myColor = "red"; <Header color={myColor}> export const StyledHeader = styled.div` color: ${props => {return props. Color}} '// The React component can be named with a capital letterCopy the code

1.2 Style Inheritance

You can reuse CSS code through style inheritance:

export const A = styled.div` ... . 'export const B = Styled (A)' /* Already inherits the style of the A component, * can then add its own style, * can also be overridden. * / `Copy the code

1.3 Adding styles to existing components

Styled (<Component>): styled(styled)

Class Header extends React.Component {/* Various code */} const StyledHeader = Styled (Header) '/* Various styles */' thus giving the Header The component appends a style and names it StyledHeader.Copy the code

2. reset.css

Each browser has its own default styles. To get rid of these slightly different styles, import reset.css to avoid having different styles on different websites.

3. Pseudo-elements introduce icon fonts

Ali’s iconfont is usually introduced in HTML. If you want to introduce it in a pseudo-element, you need the following format:

In addition to introducing font-family and so on, the content of the pseudo-element is requiredTwo escape symbols. All kinds of methods on the Internet just write an escape symbol is very bad.

4. Input pseudo-elements are not visible

Input is a self-closing tag, which makes no sense. So if you want to add something to an input, you should define the pseudo-element of the parent element of the input, not the pseudo-element of the input itself.

5. immutable.js

State cannot be changed in reducer, but it is easy for human to make mistakes. Sometimes without realizing that state has been changed, there will be some bugs that are difficult to find. So Facebook introduced immutable. Js to force us not to change state. The immutable. Js object uses get and set to fetch and modify values. Set returns a completely new object with the specified value changed.

6. redux-immutable

If redux’s combineReducer was used to create a large reducer, the following discord would occur:

State = {smallReducer: {/* this is immutable */}} // But the external state is created by combineReducer, is mutable, this is not goodCopy the code

Using the specialized combineReducer provided by Redux-immutable makes the outermost state immutable.

7. Immutable. Js pit

  1. Converting an object fromJS makes it immutable, including its reference properties. It doesn’t seem to be a problem, more like a good one. If one of the data in state is a list, that list is converted to IMmutable and then replaced every time, but if the list is replaced with another data, that other data is also converted by fromJS before the set. Otherwise it would be:

Therefore, data must be converted to immutable before being passed.

8. Why a new data was returned from the Reducer

This raises the question of how rerendering is judged in React-Redux.

  1. Every time state is updated, react-Redux performs a shallow comparison of the state in mapStateToProps in shouldComponentUpdate.
  2. Because it is a shallow comparison, if you directly modify the value of the object in the Reducer, the shallow comparison will still assume that you have not changed and do not render. Since shallow comparisons compare the referenced address, the same reference address before and after is considered unchanged.

9. Why change state and not re-render

This is the reason above, because state was directly modified in reducer.

10. The basic principle of immutable

Immutable. Js is not a deep copy, which is performance-intensive. Immutable uses the concepts of persistent data structures and shared structures. Refer to this article. The important concepts are:

  1. Changed the root node so prevState is guaranteed! == nextState, shallow comparison is not equal, therefore re-render.
  2. At the same time, only the path from the changed node to the root node is newly generated, while the other part of the tree still maintains the reference to the old node. As shown in figure:

11. How to use state in mapDispatchToProps

No, you can use Redux-Thunk, and you can use getState in actionCreators.

export const getMyAction = () => { return ((dispatch, getState) => { dispatch( getOtherAction(getState().data) ); })}Copy the code