Руководство ReactJS Component API

View more Tutorials:

1- ReactJS Component API

ReactJS проходит процесс развития, сначала Component написаны основывасясь на старых синтаксисах  Javascript. До версии  0.14 ReactJS сменил на использование  Javascript по стандарту  ES6. Многие старые  Component API были отказаны  (deprecated) или убраны, чтобы соответствовать новому стандарту. В данной статье я представлю только полезные и подходящие  Component API для  Javascript ES6.
  1. setState()
  2. forceUpdate
  3. ReactDOM.findDOMNode()

2- setState( )

Метод  setState() используется для обновления статуса Component, в то же врему он говорит React чтобы  re-render (переизобразить) Component на интерфейсе по изменениям статуса.
Использование метода  setState() было обновлено мной в деталях в статье ниже:

3- forceUpdate( )

Иногда вы хотите обновить  Component вручную, это можно сделать используя метод  forceUpdate(). Это метод класса  React.Component, поэтому подклассы у  React.Component унаследуют данный метод.
forceUpdate-example.jsx
class Random extends React.Component {
  constructor(props) {
    super(props);
  }

  newRandomValue(event) {
    this.forceUpdate();
  }

  render() {
    return (
      <div>
        <button onClick={event => this.newRandomValue(event)}>Random</button>
        <div>Random Value: {Math.random()}</div>
      </div>
    );
  }
}

// Render
ReactDOM.render(<Random />, document.getElementById("random1"));
forceUpdate-example.html
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">

      <title>ReactJS forceUpdate()</title>
      <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
      <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
      <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
      <style>
         .search-box {
           border:1px solid #cbbfab;
           padding: 5px;
         }
      </style>
   </head>
   <body>
      <h1>forceUpdate() example:</h1>

      <div id="random1"></div>

      <script src="forceUpdate-example.jsx" type="text/babel"></script>

   </body>
</html>

4- ReactDOM.findDOMNode( )

Как вы знаете, один Component это один класс, когда  Component  render (изображается) на интерфейсе вы получите модель  DOM. Таким образом  Component и DOM являются 2 разные понятия. Так как сделать, чтобы вы могли получить доступ в Node у  DOM из  Component (class)?
ReactDOM предоставляет вам метод  ReactDOM.findDOMNode(param) чтобы найти объект  Node соответствющий параметрам метода.

ReactDOM.findDOMNode(this)

Внутри  Component (class) если вы вызываете метод  ReactDOM.findDOMNode(this), он возвращает вам   Root Node модели  DOM.
findDOMNode-example.jsx
class Fruits extends React.Component {
 
  doFind()  {
     // Find root Node of this Component
     var node = ReactDOM.findDOMNode(this);
     node.style.border = "1px solid red";
  }
  render() {
    return (
      <ul>
          <li>Apple</li>
          <li>Apricot</li>
          <li>Banana</li>
          <li>
            <button onClick={() => this.doFind()}>Find Root Node</button>
          </li>
      </ul>
    );
  }
}

// Render
ReactDOM.render(<Fruits />, document.getElementById("fruits1"));
findDOMNode-example.html
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">

      <title>ReactJS findDOMNode()</title>
      <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
      <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
      <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
      <style>
         #fruits1 {
           border:1px solid blue;
           padding: 5px;
           margin-top: 20px;
         }
      </style>
   </head>
   <body>
      <h3>Example: findDOMNode(this)</h3>
      <a href="">Reset</a>

      <div id="fruits1"></div>

      <script src="findDOMNode-example.jsx" type="text/babel"></script>

   </body>
</html>

findDOMNode(ref) - TODO

View more Tutorials: