所属分类：web前端开发
react更新state方法有：1、通过key变化子组件，代码如“<Children key={this.state.key} a={this.state.a} b={this.state.b} />”；2、利用ref父组件调用子组件函数；3、通过父级给子级传数据，子级只负责渲染。
前端（vue）入门到精通课程：进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具：点击使用
本教程操作环境：Windows7系统、react17.0.1版、Dell G3电脑。
react更新state方法有哪些?
react中父级props改变，更新子级state的多种方法
子组件：
微博登录
QQ登录class Children extends Component {
constructor(props) {
super(props);
this.state = {
a: this.props.a,
b: this.props.b,
treeData: '',
targets: '',
}
}
componentDidMount() {
const { a, b } = this.state
const data = {a,b}
fetch('/Url', {
data
}).then(res => {
if (res.code === 0) {
this.setState({
treeData: res.a,
targets: res.b,
})
} else {
message.error(res.errmsg)
}
})
}
test(item1, item2) {
const data = { item1, item2 }
fetch('/Url', {data}).then(res => {
if (res.code === 0) {
this.setState({
treeData: res.a,
targets: res.b,
})
} else {
message.error(res.errmsg)
}
})
}
}
export default Children登录后复制方法一：巧用key
<Children key={this.state.key} a={this.state.a} b={this.state.b} /> //父组件调用子组件登录后复制这种方法是通过key变化子组件会重新实例化 （react的key变化会销毁组件在重新实例化组件）
方法二：利用ref父组件调用子组件函数（不符合react设计规范，但可以算一个逃生出口嘻嘻～）
class father extends Component {
constructer(props) {
super(props);
this.state={
a: '1',
b: '2',
}
this.myRef
this.test = this.test.bind(this)
}
change() {
const { a,b } = this.state
console.log(this.myRef.test(a,b)) // 直接调用实例化后的Children组件对象里函数
}
render() {
<Children wrappedComponentRef={(inst) => { this.myRef = inst } } ref={(inst) => { this.myRef = inst } } />
<button onClick={this.test}>点击</button>
}
}登录后复制注：wrappedComponentRef是react-router v4中用来解决高阶组件无法正确获取到ref（ 非高阶组件要去掉哦）
方法三:父级给子级传数据，子级只负责渲染（最符合react设计观念）推荐！！
父组件：
class father extends Component {
constructer(props) {
super(props);
this.state={
a:'1',
b:'2',
data:'',
}
}
getcomposedata() {
const { a, b } = this.state
const data = { a, b }
fetch('/Url', {data}).then(res => {
if (res.code === 0) {
this.setState({
data:res.data
})
} else {
message.error(res.errmsg)
}
})
}
render() {
<Children data={this.state.data}} />
}
}登录后复制子组件：
componentWillReceiveProps(nextProps) {
const { data } = this.state
const newdata = nextProps.data.toString()
if (data.toString() !== newdata) {
this.setState({
data: nextProps.data,
})
}
}登录后复制注：react的componentWillReceiveProps周期是存在期用改变的props来判断更新自身state
推荐学习：《react视频教程》
以上就是react更新state方法有哪些的详细内容，更多请关注zzsucai.com其它相关文章！
