什么时候打印出的 nextProps.content 和 this.props.content 才能不相等呢？每次运行时显示这两个值是相等？

来源：4-9 React 生命周期函数的使用场景

ikems

2019-11-24

在 TodoItem 组件中，有下面的函数，
shouldComponentUpdate(nextProps, nextState) {
console.log(‘nextProps’, nextProps.content)
console.log(‘thisProps’, this.props.content)
if (nextProps.content !== this.props.content) {
console.log(‘true’)
return true;
} else {
console.log(‘false’)
return false;
}
}

每次打印出的 nextProps.content 和 this.props.content 都是相等的，return false，后面就不会再继续执行 render 函数渲染。
什么时候这两值是不相等的，从而执行 render 函数进行渲染呢？

写回答

2回答

榎目贵音

2020-02-07

因为props.content自Input提交后，一直没有改变，只是做了单纯的输出到页面的功能，你需要提供一个修改方法，就能看到变化了

import React, { Component, Fragment } from "react";
import TodoItem from "./TodoItem";

class TodoList extends Component {
constructor() {
super();
this.state = {
inputValue: "hello",
list: []
};
this.handleInputChange = this.handleInputChange.bind(this);
this.addList = this.addList.bind(this);
this.delList = this.delList.bind(this);
this.setItem = this.setItem.bind(this);
}
render() {
console.log("list");
return (
<Fragment>
<div>
<label htmlFor="inputArea">点我获取光标</label>
<input
id="inputArea"
value={this.state.inputValue}
onChange={this.handleInputChange}
/>
<button onClick={this.addList}>提交</button>
</div>
<ul>
{this.state.list.map((item, index) => {
return (
<TodoItem
key={index}
val={item}
delItem={this.delList}
index={index}
setItem={this.setItem}
></TodoItem>
);
})}
</ul>
</Fragment>
);
}

handleInputChange(e) {
const inputValue = e.target.value;
this.setState(() => ({ inputValue }));
}

addList() {
// if (!this.state.inputValue) {
//   return;
// }

this.setState(prevState => ({
inputValue: "",
list: [...prevState.list, prevState.inputValue]
}));
}

delList(index) {
let list = [...this.state.list];
list.splice(index, 1);
this.setState({
list
});
}

setItem(index, val) {
console.log("---val", val);
let list = [...this.state.list];
list[index] = val;
this.setState(() => ({ list }));
}
}

export default TodoList;

toolItem:

import React, { Component } from "react";
import PropTypes from "prop-types";

class TodoItem extends Component {
constructor() {
super();
this.state = {
itemVal: ""
};
this.delItem = this.delItem.bind(this);
this.changeItemVal = this.changeItemVal.bind(this);
}
render() {
console.log("chid reader");
const { val } = this.props;
return (
<div>
<span onClick={() => this.props.delItem(this.props.index)}>{val}</span>
<input value={this.state.itemVal} onChange={this.changeItemVal} />
</div>
);
}

delItem() {
const { delItem, index } = this.props;
delItem(index);
}

shouldComponentUpdate(nextProp, nextState) {
console.log(nextProp.val, this.props.val, nextProp.val !== this.props.val);
return nextProp.val !== this.props.val;
}

changeItemVal(e) {
const itemVal = e.target.value;
this.setState(
() => ({ itemVal }),
() => {
this.props.setItem(this.props.index, itemVal);
}
);
}
}

TodoItem.propTypes = {
index: PropTypes.number.isRequired,
delItem: PropTypes.func,
val: PropTypes.string
};

TodoItem.defaultProps = {
val: "默认值"
};

export default TodoItem;