Độ nghiêm ngặt của StrictMode trong ReactJS

Component <React.StrictMode> là một tính năng được thêm vào React trong phiên bản 16.3 được thiết kế để giúp bạn loại bỏ các mẫu cũ trong mã React sẽ không được dùng nữa trong tương lai.

Component sẽ không hiển thị bất kỳ giao diện hiển thị nào và bất kỳ cờ đỏ nào trong các thành phần của bạn sẽ xuất ra nhật ký lỗi trong bảng điều khiển trình duyệt.

Để sử dụng StrictMode, bạn cần bao bọc ứng dụng của mình bằng component <React.StrictMode> như hình dưới đây:


ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Bạn cũng có thể loại trừ bất kỳ thành phần nào khỏi StrictMode bằng cách đặt chúng bên ngoài component <React.StrictMode> như sau:


function App() {
  return (
    <div>
      <Header />
      <React.StrictMode>
        <Content />
      </React.StrictMode>
    </div>
  );
}

Component <React.StrictMode> ở trên sẽ chỉ kiểm tra component <Content> trong khi bỏ qua component <Header>.

Hãy nhớ rằng StrictMode sẽ chỉ chạy khi phát triển và sẽ bị loại trừ trong quá trình xây dựng sản xuất React. Bạn không cần phải xóa hoặc nhận xét thành phần theo cách thủ công để sản xuất.

Mẫu mà StrictMode tìm kiếm trong mã của bạn như sau:

Gọi các phương thức vòng đời của thành phần lớp không an toàn.
Sử dụng chuỗi cho các thuộc tính ref trong thành phần của bạn.
Sử dụng phương thức ReactDOM.findDOMNode().
Sử dụng API ngữ cảnh cũ (mẫu Component.contextTypes).
Phát hiện tác dụng phụ từ ứng dụng của bạn bằng cách gọi hai lần một số phương thức vòng đời nhất định.

Tiếp theo, hãy phân tích cách các mẫu này được xác định trong mã của bạn.

Gọi các phương thức vòng đời của thành phần lớp không an toàn.

Một số phương thức vòng đời của thành phần lớp đã được đánh dấu là không an toàn để sử dụng vì chúng có thể tạo ra lỗi và hành vi không mong muốn.

Sử dụng các phương thức vòng đời này trong thành phần lớp của bạn sẽ kích hoạt nhật ký lỗi trong bảng điều khiển trình duyệt của bạn:

componentWillMount
componentWillReceiveProps
componentWillUpdate

Hãy nhớ rằng từ không an toàn ở đây không đề cập đến bảo mật ứng dụng. Nó có nghĩa là chúng dễ gây ra lỗi với cách các phiên bản React trong tương lai hoạt động bên trong.

Tìm hiểu thêm về lý do tại sao các phương pháp này được coi là không an toàn tại đây.

Sử dụng chuỗi cho các thuộc tính ref trong thành phần của bạn


<input 
  ref="textInput" 
  type="text" 
  name="username" />

Sau đó, bạn có thể nhận tham chiếu đến thành phần <input> của mình bằng this.refs.textInput.

Ngoài giờ, việc sử dụng các tham chiếu string gây ra một số trường hợp cạnh tranh, vì vậy bạn nên tránh xa nó để ưu tiên sử dụng các tham chiếu object.

Để tạo một tham chiếu object, bạn có thể sử dụng phương thức React.createRef() trong lớp constructor() như được hiển thị bên dưới:


class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.textInputRef = React.createRef();
  }

  componentDidMount() {
    this.textInputRef.current.focus();
  }

  render() {
    return <input type="text" ref={this.textInputRef} />;
  }
}

Bạn có thể tìm hiểu thêm về phương thức createRef() tại đây.

Sử dụng phương thức ReactDOM.findDOMNode()

ReactDOM cung cấp phương thức findDOMNode() như một phương án cuối cùng để tìm thành phần của bạn khi tất cả các phương thức khác không thành công.

Phương thức sẽ di chuyển qua các thành phần đã được gắn vào DOM và trả về phần tử DOM của trình duyệt gốc tương ứng:


ReactDOM.findDOMNode(Component);

Tuy nhiên, việc sử dụng findDOMNode() hiện không được khuyến khích vì nó đi ngược lại với phong cách khai báo của React.

Bạn cũng có thể đính kèm thuộc tính ref vào thành phần bạn cần và tránh sử dụng hoàn toàn phương thức findDOMNode().

Sử dụng mẫu API ngữ cảnh cũ

Trong các phiên bản trước, bạn có thể truy cập API ngữ cảnh bằng cách sử dụng thuộc tính Component.contextTypes.

Thành phần cung cấp ngữ cảnh (hoặc thành phần mẹ) có thể tạo và đặt giá trị ngữ cảnh bằng cách sử dụng thuộc tính childContextTypes và phương thức getChildContext().

Ví dụ: giả sử bạn có cấu trúc ứng dụng như sau:


<App>
  <Content>
    <Button></Button>
  </Content>
</App>

Bạn có thể gửi dữ liệu từ thành phần <App> tới thành phần <Button> mà không cần gửi phần mềm hỗ trợ đến thành phần <Content>.

Đầu tiên, tạo và đặt giá trị API ngữ cảnh trong thành phần <App> như sau:


class App extends React.Component {
  getChildContext() {
    return {color: "purple"};
  }

  render() {
    return <Content>Hello World</Content>;
  }
}

MessageList.childContextTypes = {
  color: PropTypes.string
};

Tiếp theo, đi vào thành phần <Button> của bạn và giá trị color ngữ cảnh bằng ContextTypes như được hiển thị bên dưới:


class Button extends React.Component {
  render() {
    return (
      <button style={{background: this.context.color}}>
        {this.props.children}
      </button>
    );
  }
}

Button.contextTypes = {
  color: PropTypes.string
};

Tuy nhiên, mẫu này đã không còn được dùng nữa để thay thế cho API ngữ cảnh hiện đại sử dụng phương thức React.createContext() trực quan hơn và dễ hiểu hơn.

Phát hiện tác dụng phụ từ ứng dụng của bạn

Khi sự phát triển của React tiếp tục, các nhà phát triển thư viện đã thực hiện các thử nghiệm để thúc đẩy cách thức hoạt động của React trong nội bộ.

Các phiên bản React trong tương lai dự kiến sẽ chạy đồng thời theo mặc định, có nghĩa là ứng dụng của bạn sẽ được hiển thị theo từng phần, giảm thời gian cần thiết để tải mã JavaScript của bạn và cung cấp nội dung có ý nghĩa đầu tiên.

Vì lý do này, StrictMode sẽ chạy các phương thức sau trong thành phần của bạn hai lần để đảm bảo rằng ứng dụng của bạn tạo ra kết quả nhất quán: