By valentinogagliardi
Translator: front-end wit
Source: medium

. bind(this) is not required when using arrow functions

Generally, if there is a controlled component, it has the following structure:

class Foo extends React.Component{
  constructor( props ){
    super( props );
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(event){
    // your event handling logic
  }
  render(){
    return (
      <button type="button" 
      onClick={this.handleClick}>
      Click Me
      </button>
    );
  }
}

You can add. bind(this) to each method to solve this problem, because most tutorials tell you to do so. If you have several controlled components, there will be a lot of code in constructor() {}.

Instead, you can:

class Foo extends React.Component{
  handleClick = (event) => {
    // your event handling logic
  }
  render(){
    return (
      <button type="button" 
      onClick={this.handleClick}>
        Click Me
      </button>
    );
  }
}

Arrow function usage of ES6 Lexical scope , which allows methods to access where this triggers.

When the service worker conflicts with your code

Service workers are ideal for progressive Web applications, allowing offline access and optimizing users with poor Internet connections.

But when you don't know that the service worker is caching static files, you will upload hot fixes repeatedly, only to find that your website has not been updated.

Don't panic. Check src/index.js:

// Write it off
serviceWorker.unregister();

Starting with version 16.8, the default is serverWorker.unregister().

99% of the cases do not need to run the eject command

Create React APP An option, yarn eject, is provided to pop up projects to customize the build process.

I remember trying to customize the build process so that SVG images are automatically inlined into the code. I spent hours trying to understand the build process. Finally, we get an import file, which injects SVG tags, and we increase the loading speed of the website by 0.0001 Ms.

Popping up a React project is like opening the hood of a running car and changing the engine dynamically to increase its running speed by 1%.

Of course, if you're already a master of Webpack, it's worth customizing the build process to customize the requirements of the project.

When you want to finish the task on time, focus on where it can push you forward.

ESlint Auto save auto format can save a lot of time

You may have copied some code from some unformatted place. Because you can't stand how ugly it looks, you spend time manually adding spaces.

Using the ESLint and Visual Studio code plug-ins, it can format it for you when you save it.

How to set

1. In your package.json, add some dev dependencies and execute npm i or yarn:

"devDependencies": {
 "eslint-config-airbnb": "^17.1.0",
 "eslint-config-prettier": "^3.1.0",
 "eslint-plugin-import": "^2.14.0",
 "eslint-plugin-jsx-a11y": "^6.1.1",
 "eslint-plugin-prettier": "^3.0.0",
 "eslint-plugin-react": "^7.11.0"
}

2. Install the ESLint plug-in

3. Start Auto Fix On Save

You don't need Redux, styled components, etc.

Every tool has a purpose. In other words, it's good to know different tools.

If you only have a hammer in your hand, everything looks like a nail

You need to consider and compare the setup time of some of the libraries you use.

• What is the problem I want to solve
• Can this project benefit from this library for a long time
• Has React provided something out of the box?

Now you can use React's Context and Hook , do you still need Redux?

When your users are in a bad Internet connection environment, I strongly recommend using Redux Offline.

Using event handlers

If you don't want to type the same content repeatedly, you can choose to reuse the event handler:

class App extends Component {
 constructor(props) {
  super(props);
  this.state = {
   foo: "",
   bar: "",
  };
 }
 // Reusable for all inputs
 onChange = e => {
  const {
   target: { value, name },
  } = e;
  
  // name will be the state name
  this.setState({
   [name]: value
  });
 };
 
 render() {
  return (
   <div>
    <input name="foo" onChange={this.onChange} />
    <input name="bar" onChange={this.onChange} />   
   </div>
  );
 }
}

setState is asynchronous

Naive, I will write some code like this:

 constructor(props) {
  super(props);
  this.state = {
   isFiltered: false
  };
 }
 toggleFilter = () => {
  this.setState({
   isFiltered: !this.state.isFiltered
  });
  this.filterData();
 };
 
 filterData = () => {
  //  this.state.isFiltered should be true, but it's not because setState is asynchronous
  // isFiltered hasn't changed
  if (this.state.isFiltered) {
   // Do some filtering
  }
 };

Correct way 1: pass on the state

toggleFilter = () => {
 const currentFilterState = !this.state.isFiltered;
 this.setState({
  isFiltered: currentFilterState
 });
 this.filterData(currentFilterState);
};
filterData = (currentFilterState) => {
 if (currentFilterState) {
  // Do some filtering
 }
};

Correct way 2: use setState callback function

toggleFilter = () => {
 this.setState((prevState) => ({
  isFiltered: !prevState.isFiltered
 }), () => {
  this.filterData();
 });
};
filterData = () => {
  if (this.state.isFiltered) {
   // Do some filtering
  }
};

summary

These tips have saved me a lot of time. I believe there are more. Please leave a message in the comment area.

The bugs that may exist after code deployment can't be known in real time. In order to solve these bugs afterwards, a lot of time has been spent on log debugging. Here is a good BUG monitoring tool recommended by the way. Fundebug.

Original text: https://medium.freecodecamp.o...

Communication (welcome to join the group, the group will be red on weekdays, interactive discussion technology)

Alibaba cloud has been doing activities recently, with a discount of 20%. If you are interested, please take a look at: https://promotion.aliyun.com/...

The articles of dry goods series are summarized as follows. I think it's a good idea to order a Star. Welcome to learn from each other.

https://github.com/qq44924588...

Because of the space limitation, today's sharing is only here. If you want to know more, you can scan the QR code at the bottom of each article, and then pay attention to our wechat public account to learn more information and valuable content.