React，由 Facebook 创建，是一个用于构建用户界面的开源 JavaScript 库。它用于创建组件、处理状态和道具、利用事件侦听器和某些生命周期方法在数据更改时更新数据。React 将 HTML 与 JavaScript 功能结合起来，创建自己的标记语言 JSX。本专题将向您介绍所有这些概念，以及如何实现它们和如何将其用于您自己的项目中。

使用 Array.Filter() 动态过滤数组

map 数组方法是一个强大的工具，在使用 React 时经常使用。与 map 相关的另一种方法是 filter，它根据条件过滤数组的内容，然后返回一个新数组。例如，如果我们有一个 users 数组，每个数组元素都有一个可以设置为 true 或 false 的 online 属性，我们可以只过滤那些在线的用户：

let onlineUsers = users.filter(user => user.online);

在下面代码中，MyComponent 的 state 由一个 users 数组初始化。有些用户在线，有些则不在线。过滤数组，以便我们只看到在线用户。为此，首先使用 filter 返回一个新数组，该数组只包含 online 属性为 true 的用户。然后，在 renderOnline 变量中，映射经过过滤的数组，并为每个用户返回一个包含它们 username 文本的 li 元素。确保像上篇文章一样包含一个独特的 key。

完整代码如下所示：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [
        {
          username: '张佳一',
          online: true
        },
        {
          username: '马飞国',
          online: false
        },
        {
          username: '赵新新',
          online: true
        },
        {
          username: '吴明飞',
          online: false
        },
        {
          username: '刘国光',
          online: true
        },
        {
          username: '何洁',
          online: true
        }
      ]
    }
  }
  render() {
    const usersOnline = this.state.users.filter(user => user.online === true); 
    const renderOnline = usersOnline.map(user => <li key={user.username}>{user.username}</li>); 
    return (
       <div>
         <h1>当前在线用户:</h1>
         <ul>
           {renderOnline}
         </ul>
       </div>
    );
  }
};

小编典典

除了@Dan的答案，我认为其他答案对您没有帮助/有用，因为它们不会遍历您的JSON对象。

为了正确执行此操作，您需要遍历JSON对象中的每个键。您可以通过几种方法来执行此操作，其中之一是使用Object.keys()。像下面的代码片段。

此解决方案遍历JSON对象中的每个键，并将其推入数组。一旦有了该数组，就可以map()像往常一样使用遍历它，并将相关的props传递给另一个子组件。

class MyApp extends React.Component {

render() {

var json = {"active":{"label":"Active","value":"12"},"automatic":{"label":"Automatic","value":"8"},"waiting":{"label":"Waiting","value":"1"},"manual":{"label":"Manual","value":"3"}};

var arr = [];

Object.keys(json).forEach(function(key) {

arr.push(json[key]);

});

return

  • {arr.map(item => )}

;

}

}

class MyAppChild extends React.Component {

render() {

return

{this.props.label + " - " + this.props.value};

}

}

ReactDOM.render(, document.getElementById('myapp'));

从出生到成长，最后到死亡，这个过程的时间可以理解为生命周期。React的生命周期同理也是这么一个过程。
React的生命周期分为三个阶段：挂载期（也叫实例化期）、更新期（也叫存在期）、卸载期（也叫销毁期）。在每个周期中React都提供了一些钩子函数。
生命周期的描述如下：
挂载期：一个组件实例初次北创建的过程。
更新期：组件在创建后再次渲染的过程。
卸载期：组件在使用完后被销毁的过程。

组件的挂载：

组件在首次创建后，进行第一次的渲染为挂载期。挂载期有的一些方法会被依次触发，列举如下：

constructor(构造函数，初始化状态值)
getInitialState(设置状态机)
getDefaultProps(获取默认的props)
UNSAFE_componentWillMount(首次渲染前执行)
render(渲染组件)
componentDidMount(render渲染之后执行的操作)
//组件挂载
import React from 'react';
import ReactDOM from 'react-dom';
class HelloWorld extends React.Component{
    constructor(props) {
        super(props);
        console.log("1,构造函数");
        this.state={};
        console.log("2,设置状态机");
    }
    static defaultProps={
        name:"React",
    }
    UNSAFE_componentWillMount(nextProps, nextState, nextContext) {
        console.log("3,完成首次渲染前调用");
    }
    render() {
        console.log("4,组件进行渲染");
        return (
            <div>
                <div>{this.props.name}</div>
            </div>
        )
    }
    componentDidMount() {
        console.log("5,componentDidMount render渲染后的操作")
    }
}
ReactDOM.render(<HelloWorld />, document.getElementById('root'));
 


组件的更新：
组件更新，指的是在组件初次渲染后，进行了组件状态的改变。React在生命周期中的更新过程包括以下几个方法：

UNSAFE_componentWillReceiveProps :当父组件更新子组件state时，该方法会被调用。
shouldComponentUpdate ： 该方法决定组件state或props的改变是否需要重新渲染组件。
UNSAFE_componentWillUpdate : 在组件接受新的state或者props时，即将进行重新渲染前调用该方法，和UNSAFE_componentWillMount方法类似。
componentDidUpdate : 在组件重新渲染后调用该方法，和componentDidMount方法类似。
//组件更新
class HelloWorldFather extends React.Component{
    constructor(props) {
        super(props);
        this.updateChildProps=this.updateChildProps.bind(this);
        this.state={  //初始化父组件
            name:"React"
        }
    }
    updateChildProps(){  //更新父组件state
        this.setState({
            name:"Vue"
        })
    }
    render() {
        return (
            <div>
                <HelloWorld name={this.state.name} />  {/*父组件的state传递给子组件*/}
                <button onClick={this.updateChildProps}>更新子组件props</button>
            </div>
        )
    }
}
class HelloWorld extends React.Component{
    constructor(props) {
        super(props);
        console.log("1,构造函数");
        console.log("2,设置状态机")
    }
    UNSAFE_componentWillMount() {
        console.log("3,完成首次渲染前调用");
    }
    UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
        console.log("6,父组件更新子组件时调用该方法");
    }
    shouldComponentUpdate(nextProps, nextState, nextContext) {
        console.log("7,决定组件props或者state的改变是否需要重新进行渲染");
        return true;
    }
    UNSAFE_componentWillUpdate(nextProps, nextState, nextContext) {
        console.log("8,当接收到新的props或state时，调用该方法");
    }
    render() {
        console.log("4,组件进行渲染");
        return (
            <div>
                <div>{this.props.name}</div>
            </div>
        )
    }
    componentDidMount() {
        console.log("5,componentDidMount render后的操作");
    }
    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log("9,组件被重新选然后调用该方法");
    }
}
ReactDOM.render(<HelloWorldFather />,document.getElementById("root"));
 

点击“更新子组件props”后：


组件的卸载：
生命周期的最后一个过程为组件卸载期，也称为组件销毁期。该过程主要涉及一个 方法，即componentWillUnmount，当组件从DOM树删除的时候调用该方法。

//组件卸载
class HelloWorldFather extends React.Component{
    constructor(props) {
        super(props);
        this.updateChildProps=this.updateChildProps.bind(this);
        this.state={  //初始化父组件
            name:"React"
        }
    }
    updateChildProps(){  //更新父组件state
        this.setState({
            name:"Vue"
        })
    }
    render() {
        return (
            <div>
                <HelloWorld name={this.state.name} />  {/*父组件的state传递给子组件*/}
                <button onClick={this.updateChildProps}>更新子组件props</button>
            </div>
        )
    }
}
class HelloWorld extends React.Component{
    constructor(props) {
        super(props);
        console.log("1,构造函数");
        console.log("2,设置状态机")
    }
    UNSAFE_componentWillMount() {
        console.log("3,完成首次渲染前调用");
    }
    UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
        console.log("6,父组件更新子组件时调用该方法");
    }
    shouldComponentUpdate(nextProps, nextState, nextContext) {
        console.log("7,决定组件props或者state的改变是否需要重新进行渲染");
        return true;
    }
    UNSAFE_componentWillUpdate(nextProps, nextState, nextContext) {
        console.log("8,当接收到新的props或state时，调用该方法");
    }
    delComponent(){  //添加卸载方法
        ReactDOM.unmountComponentAtNode(document.getElementById("root"));
    }
    render() {
        console.log("4,组件进行渲染");
        return (
            <div>
                <div>{this.props.name}</div>
                <button onClick={this.delComponent}>卸载组件</button>  {/*声明卸载按钮*/}
            </div>
        )
    }
    componentDidMount() {
        console.log("5,componentDidMount render后的操作");
    }
    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log("9,组件被重新选然后调用该方法");
    }
    componentWillUnmount() {  //组件卸载后执行
        console.log("10,组件已被卸载");
    }
}
ReactDOM.render(<HelloWorldFather />,document.getElementById("root"));
 

点击卸载按钮后：


总览组件生命周期：

# javascript # react.js # 前端
Logo
https://edu.csdn.net/learn/39067/627173?utm_source=2019755004

汇聚全球AI编程工具，助力开发者即刻编程。

更多推荐

cover

100% AI 写的开源项目三周多已获得 800 star 了

avatar AI编程社区
cover

2025年五大AI编程工具终极横评：Trae、Cursor、Copilot、通义灵码、文心快码谁主沉浮？

avatar AI编程社区
cover

2025中国AI编程工具市场研究报告：Trae领跑新一代智能开发平台

avatar AI编程社区