betacode

Руководство 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/react@16.4.2/umd/react.production.min.js"></script>
      <script src="https://unpkg.com/react-dom@16.4.2/umd/react-dom.production.min.js"></script>
      <script src="https://unpkg.com/babel-standalone@6.26.0/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/react@16.4.2/umd/react.production.min.js"></script>
      <script src="https://unpkg.com/react-dom@16.4.2/umd/react-dom.production.min.js"></script>
      <script src="https://unpkg.com/babel-standalone@6.26.0/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: