La aplicación React-Hybrid implementa la función de me gusta y comentarios-función de círculo de amigos

1. Demanda:

Un software de publicación dinámico, puede dar me gusta, cancelar y eliminar comentarios.
2. Ideas de implementación: en
primer lugar, debe realizar operaciones como me gusta y comentarios en tiempo real. Es imposible actualizar la página en tiempo real para realizar operaciones de renderizado. Entonces necesitamos almacenar estos datos en una nueva matriz en nuestro local.

• Al renderizar por primera vez, configuramos una matriz local para almacenar los datos renderizados por la interfaz. Cuando estamos operando, necesitamos manipular los datos pushen nuestra propia matriz. Entonces, para resumir: me gusta, cancelar, eliminar y eliminar comentarios, es decir, agregar o eliminar una matriz.

 对于所需要操作的模块来说，一定需要将其抽取为单独组件。只有这样，才好对数据进行管理处理。

3. El código de implementación específico ya no se publicará, principalmente se ocupará de muchos detalles.
4. Parte de los pasos del código:

• Primero defina una matriz para almacenar datos en el estado local.
  
• Luego, realice el procesamiento de almacenamiento de datos en segundo plano
• // aquí está solo mi procesamiento de datos comerciales

  // 评论数据处理
  getCommentList = () => {
    
    
    const {
    
     item, dynamicsList: {
    
     commentContentList } } = this.props;
    const newCommentList = [];
    item.commentList.forEach((item2) => {
    
    
      (commentContentList || []).forEach(item3 => {
    
    
        if ((item3.commentId === item2.commentId) && item3.commentType === 0) {
    
    
          newCommentList.push({
    
    
          });
        }
      });
    });
    this.setState({
    
    
      initCommentList: newCommentList,
    });
  }

• Envíe un comentario
  Se utiliza un complemento de reacción para actualizar la matriz aquí, y puede buscar usted mismo.
  Puede llamar a la interfaz correspondiente mientras actualiza la matriz local.

• react-addons-update

import update from 'react-addons-update';

    if (isCommentContent) {
    
    
      this.setState({
    
    
        initCommentList: update(initCommentList, {
    
    
          $push: [{
    
    
            commentContent,
            receiverName: '',
            senderAccountId: accountId,
            senderName: accountName,
          }]
        }),
        commentInputVisible: false,
        showComment: false,
      })
    }