This is the 17th day of my participation in Gwen Challenge

Hi everyone, I’m Luo Zhu 🎋, a woodworking front end 🧚🏻♀️ living in Hangzhou. If you like my article 🧚🏻, you can gather spiritulist blog for me by clicking like.

1. setState() 和 replaceState()What are the differences between methods?

When you use setState(), the current and previous states are merged. ReplaceState () throws the current state and replaces it with only what you provide. Usually setState() will be used unless you really need to delete all the previous keys for some reason. You can also set the state to false/null in setState() instead of using replaceState().

2. How do I monitor status changes?

The componentDidUpdate lifecycle method is called when the state changes. You can compare the supplied state and props values to the current state and props to determine if there is a meaningful change.

componentDidUpdate(object prevProps, object prevState)
Copy the code

Note: Previous ReactJS versions also used componentWillUpdate(Object nextProps, Object nextState) to listen for state changes. In the latest version, it has been deprecated.

3. What is the recommended method for removing array elements in React state?

A better approach is to use the array.prototype.filter () method.

For example, let’s create a removeItem() method to update the status.

removeItem(index) {
  this.setState({
    data: this.state.data.filter((item, i) = >i ! == index) }) }Copy the code

4. Is it possible to use React without rendering HTML?

This is possible in the latest version (>=16.2). Here are the options available.

render() {
  return false
}
Copy the code
render() {
  return null
}
Copy the code
render() {
  return[]}Copy the code
render() {
  return <React.Fragment></React.Fragment>
}
Copy the code
render() {
  return <></>
}
Copy the code

Return undefined will not work.

5. How to print beautiful JSON with React?

We can use the 

 tag to preserve the json.stringify () format.
const data = { name: 'John'.age: 42 };

class User extends React.Component {
  render() {
    return <pre>{JSON.stringify(data, null, 2)}</pre>;
  }
}

React.render(<User />.document.getElementById('container'));
Copy the code

6. Why can’t you update props in React?

The idea with React was that props should be immutable and top-down. This means that the parent component can send any props value to the child component, but the child component cannot modify the props received.

7. How do I focus an input field when the page loads?

You do this by creating a ref for the input element and using it in componentDidMount().

class App extends React.Component {
  componentDidMount() {
    if (this.nameInput) {
      this.nameInput.focus(); }}render() {
    return (
      <div>
        <input defaultValue={"Won't focus} "/ >
        <input
          ref={input= > (this.nameInput = input)}
          defaultValue={'Will focus'}
        />
      </div>
    );
  }
}

ReactDOM.render(<App />.document.getElementById('app'));
Copy the code

8. What are the ways to update objects in status?

  1. Called after merging state and objectsetState():
  • useObject.assign()Create a copy of the object:
const user = Object.assign({}, this.state.user, { age: 42 });
this.setState({ user });
Copy the code
  • Use the expansion operator:
constuser = { ... this.state.user,age: 42 };
this.setState({ user });
Copy the code
  1. callsetState()Pass in the function when:
this.setState(prevState= > ({
  user: {
    ...prevState.user,
    age: 42,}}));Copy the code

9. How do we view the runtime React version in a browser?

You can use React. Version to get the version.

const REACT_VERSION = React.version;

ReactDOM.render(
  <div>{`React version: ${REACT_VERSION}`}</div>.document.getElementById('app'));Copy the code

In 10.create-react-appWhat are the methods involved in polyfills?

There are ways to include polyfills in create-react-app.

  1. Manual fromcore-jsIntroduction:

Create a file named (something like) Polyfills. Js and import it into the root index.js file. Run NPM install core-js or YARN add core-js and import the specific functionality you need.

import 'core-js/fn/array/find';
import 'core-js/fn/array/includes';
import 'core-js/fn/number/is-nan';
Copy the code
  1. Using Polyfill service:

Using polyfill. IO CDN, retrieve custom browser-specific Polyfills by adding this line to index.html.

<script src="https://cdn.polyfill.io/v2/polyfill.min.js? features=default,Array.prototype.includes"></script>
Copy the code

In the above script, we had to explicitly request the array.prototype.includes feature because it is not included in the default feature set.

This article was first published in “Gold Digging Column”, simultaneously in the public account “Luo Zhu early Teahouse” and “Luo Zhu official website”, translated from reactjs-interchange-questions.