在 React.js 渲染方法完成后执行 JavaScript

2020-05-28 08:00:00 · 飞浪

介绍 React不是MVC（模型视图控制器）框架，但其架构允许开发人员通过轻松区分模板、JavaScript和样式来编写干净的代码。render方法包含由所有DOM元素组成的应用程序

介绍

React 不是 MVC（模型视图控制器）框架，但其架构允许开发人员通过轻松区分模板、JavaScript 和样式来编写干净的代码。render 方法包含由所有 DOM 元素组成的应用程序的 JSX 模板。为了在应用程序中执行 JavaScript，需要使用称为生命周期方法的专用方法。本指南详细介绍了这些方法及其用例，让您了解在 DOM 呈现后在哪里编写 JavaScript。

React 组件的生命周期

React 中的每个组件都会经历三个阶段：挂载阶段、更新阶段和卸载阶段。在挂载阶段，组件首次创建并挂载到 DOM 上，并设置状态的初始值。接下来是更新阶段，在此阶段，通过比较旧 props 与新 props、更新状态等来满足应用程序的所有交互功能。最后，组件从 DOM 中卸载并销毁。

组件生命周期方法

在这些阶段中，您可以使用某些方法，这些方法称为生命周期方法。render ()负责处理 DOM 元素，每次安装或更新组件时都会调用它。因此，在渲染方法完成后需要执行的任何 JavaScript 都可以进入两个方法：安装阶段的ComponentDidMount()和更新阶段的ComponentDidUpdate()。还有其他与这些阶段相关的方法，但本指南将重点介绍这两个方法，因为它们与本主题相关。

使用案例

ComponentDidMount ()方法通常用于初始化应用中的任何第三方组件或插件。例如，当您使用 MaterializeCSS 或 Bootstrap 等原生 CSS 库来制作模态框和弹出窗口时，可以在此方法中初始化它们的 JavaScript。此外，如果您的组件需要显示任何初始数据，则可以在此处对服务器或外部数据库进行所有 API 调用。

ComponentDidUpdate ()方法在组件通过明确定义的条件更新后被调用。如果没有这个条件，它将继续调用自身，从而导致无限循环并最终破坏应用程序。如果状态在第一个渲染方法之后发生变化，请使用此方法，并确保在第一个渲染调用之前不会调用它。如果您的应用程序中有一个要呈现为可编辑的个人资料页面，则可以使用此组件来更新状态并将更新的数据发送到服务器。

实现与示例

让我们通过一个例子来看一下。

设置

确保您的机器上安装了 Nodejs 和 npm（至少版本 8 或更高版本）以及代码编辑器和 Web 浏览器。

使用 create-react-app 创建一个新项目：

      npx create-react-app react-javascript

还可以通过运行以下命令安装 axios 以进行 API 调用：

      npm i axios

清理模板

从App.js中删除徽标、App.css及其所有导入。清除 App 组件内的入门模板。您的App.js应类似于下面的代码。

      import React,{Component} from 'react';
import axios from 'axios';

export default class App extends Component {
  constructor(){
    super();
   }
  
  render(){
   
    return (
      <div className="App">
             <h1>Welcome to App</h1>   
      </div>
    );
  }
}
    

使用 componentDidMount()

调用componentDidMount()并调用其中的另一个本地函数来处理 API 调用。

      ...
componentDidMount(){
    this.getUser();
  }
...
    

在构造函数内部，使用空的用户对象设置状态，该对象将由 API 的数据填充。

      constructor(){
    super();
    this.state={
      users:[]
    }
  }
    

创建异步 getUser()函数并进行 API 调用以获取一些外部数据。本指南使用免费的演示 REST API，但您也可以在此处使用自己的 API。

      async getUser(){
    let usersData=await axios.get('https://reqres.in/api/users?page=2')
                    .then(res=>{
                      return res.data.data;
                    })
                    .catch(err=>{
                      console.log(err);
                    })
    this.setState({
      users:usersData
    },()=>{console.log(this.state)})
  }
    

最后，通过循环用户数组将该数据输出到 DOM 上。

      render(){
    const {users}=this.state;
    return (
      <div className="App">
        {users && users.map(user=>{
          return(
            <div className="card" key={user.id}>
              <img src={user.avatar} alt="Avatar" style={{width:'auto'}}/>
              <div className="container" >
                <h4 ><b>{user.first_name}</b></h4>
                <p>{user.email}</p>
              </div>
            </div>
          )
        })}
        
      </div>
    );
  }
    

你的App.js应该如下所示：

      import React,{Component} from 'react';
import axios from 'axios';

export default class App extends Component {
  constructor(){
    super();
    this.getUser=this.getUser.bind(this);
    this.state={
      users:[]
    }
  }
  componentDidMount(){
    this.getUser();
  }
  async getUser(){
    let usersData=await axios.get('https://reqres.in/api/users?page=2')
                    .then(res=>{
                      return res.data.data;
                    })
                    .catch(err=>{
                      console.log(err);
                    })
    this.setState({
      users:usersData
    },()=>{console.log(this.state)})
  }
  render(){
    const {users}=this.state;
    return (
      <div className="App">
        {users && users.map(user=>{
          return(
            <div className="card" key={user.id}>
              <img src={user.avatar} alt="Avatar" style={{width:'auto'}}/>
              <div className="container" >
                <h4 ><b>{user.first_name}</b></h4>
                <p>{user.email}</p>
              </div>
            </div>
          )
        })}
        
      </div>
    );
  }
}
    

使用 componentDidUpdate()

有时，当状态数据改变其值并且在第一次渲染调用后进行一些后续 API 调用时，会使用componentDidUpdate() 。

      componentDidUpdate(prevProps,prevState){
    if(this.props.id !== prevProps.id){
      //make an API call here and update the state
    }
  }
    

例如，如果您想通过比较一组新用户来更新用户列表，您可以在此方法中放置相关条件，并使用新数据更新先前的数据。

测试

在根目录中，运行：

      npm start

这将启动本地开发服务器（通常在端口3000上），您可以在页面上看到虚拟数据。您可以随意按照自己想要的方式设置样式。

等效钩子

在 React v. 16.8.0 之后，核心 API 中引入了稳定版的 React Hooks，使得组件开发变得更容易、更快捷。Hooks 允许我们将之前基于面向对象模型的相同组件编码为纯函数模型。render 方法被简单的 return 语句取代，并且操纵一个常见的useEffect hook 来实现不同的生命周期方法。componentDidMount ()的 hooks 等效如下：

      import React,{useEffect,useState} from 'react';
import axios from 'axios';

export default function App () {
  const[users,setUsers]=useState([]);

  useEffect(async()=>{
    let usersData=await axios.get('https://reqres.in/api/users?page=2')
                    .then(res=>{
                      return res.data.data;
                    })
                    .catch(err=>{
                      console.log(err);
                    })
    setUsers(usersData)
  },[])
  
    return (
      <div className="App">
        {users && users.map(user=>{
          return(
            <div className="card" key={user.id}>
              <img src={user.avatar} alt="Avatar" style={{width:'auto'}}/>
              <div className="container" >
                <h4 ><b>{user.first_name}</b></h4>
                <p>{user.email}</p>
              </div>
            </div>
          )
        })}
        
      </div>
    );
}
    

结论

组件生命周期方法为您提供了一种处理应用中某些核心功能的绝佳方法。了解组件的生命周期阶段对于正确使用它们至关重要。在本指南中，您了解了两种最常见生命周期方法的最重要用例及其在代码中的实现，从而了解在将组件添加到 DOM 树后如何编写和执行 JavaScript。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

在 React.js 渲染方法完成后执行 JavaScript

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import React,{Component} from 'react'; import axios from 'axios'; export default class App extends Component { constructor(){ super(); } render(){ return ( <div className="App"> <h1>Welcome to App</h1> </div> ); } }

async getUser(){ let usersData=await axios.get('https://reqres.in/api/users?page=2') .then(res=>{ return res.data.data; }) .catch(err=>{ console.log(err); }) this.setState({ users:usersData },()=>{console.log(this.state)}) }

render(){ const {users}=this.state; return ( <div className="App"> {users && users.map(user=>{ return( <div className="card" key={user.id}> <img src={user.avatar} alt="Avatar" style={{width:'auto'}}/> <div className="container" > <h4 ><b>{user.first_name}</b></h4> <p>{user.email}</p> </div> </div> ) })} </div> ); }

import React,{Component} from 'react'; import axios from 'axios'; export default class App extends Component { constructor(){ super(); this.getUser=this.getUser.bind(this); this.state={ users:[] } } componentDidMount(){ this.getUser(); } async getUser(){ let usersData=await axios.get('https://reqres.in/api/users?page=2') .then(res=>{ return res.data.data; }) .catch(err=>{ console.log(err); }) this.setState({ users:usersData },()=>{console.log(this.state)}) } render(){ const {users}=this.state; return ( <div className="App"> {users && users.map(user=>{ return( <div className="card" key={user.id}> <img src={user.avatar} alt="Avatar" style={{width:'auto'}}/> <div className="container" > <h4 ><b>{user.first_name}</b></h4> <p>{user.email}</p> </div> </div> ) })} </div> ); } }

import React,{useEffect,useState} from 'react'; import axios from 'axios'; export default function App () { const[users,setUsers]=useState([]); useEffect(async()=>{ let usersData=await axios.get('https://reqres.in/api/users?page=2') .then(res=>{ return res.data.data; }) .catch(err=>{ console.log(err); }) setUsers(usersData) },[]) return ( <div className="App"> {users && users.map(user=>{ return( <div className="card" key={user.id}> <img src={user.avatar} alt="Avatar" style={{width:'auto'}}/> <div className="container" > <h4 ><b>{user.first_name}</b></h4> <p>{user.email}</p> </div> </div> ) })} </div> ); }