前端库-React框架：「45] 使用 Array.Filter() 动态过滤数组

最新推荐文章于 2024-08-28 09:10:10 发布

M_Jack

最新推荐文章于 2024-08-28 09:10:10 发布

阅读量2.2k

点赞数

文章标签： javascript react.js 前端

原文链接：https://blog.csdn.net/qq_43717065/article/details/108521741

版权

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"));

点击卸载按钮后：

总览组件生命周期：

M_Jack

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端库-React框架：「45] 使用 Array.Filter() 动态过滤数组

React，由 Facebook 创建，是一个用于构建用户界面的开源 JavaScript 库。它用于创建组件、处理状态和道具、利用事件侦听器和某些生命周期方法在数据更改时更新数据。React 将 HTML 与 JavaScript 功能结合起来，创建自己的标记语言 JSX。本专题将向您介绍所有这些概念，以及如何实现它们和如何将其用于您自己的项目中。使用 Array.Filter() 动态过滤数组map 数组方法是一个强大的工具，在使用 React 时经常使用。与 map 相关的另一种方法是 filter，
复制链接

扫一扫