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"));
点击卸载按钮后:
总览组件生命周期: