2.React数据传递 之☞ 父子之间数据传递 / React生命周期

  • Z时代
  • 2024-01-10
  • 分类：综合

react

组件的信息传递的方式：

　　1.props　　（父子之间的时候使用）

　　2.上下文　　（有共同祖先，多层或平行之间需要操作数据的时候使用 ）

　　3.redux　　（有没有共同祖先 都可以实现状态管理、信息共享）

 

 

this.state = {} 状态初始化 初始化必须放在 constructor 下

　　只要更新 state 就会更新视图。

　　this.setState({ xxx })

表单元素如果设置一个默认值（基于 state 中的状态），此时表单元素就是一个受控组件。

　　value、checked

 

props

从父级传进来的为props

　　<input num="n"> props:['num']

　　<input num="aaa" /> this.props.num

父级传子级：

　　1.把数据挂在子组件的属性上

return ( <div>
    <Ppa {...{
      num, // num : num  ->  num
    }}/>
  </div>
)

　　2.子组件接收父组件的数据通过this.props

let { num } = this.props
console.log( num )

 

表单如果要设置默认值：

　　defaultValue / onChange

　　checkbox defaultChecked / onChange

 

Vue里面是这样接收的：

　　@nn="cc"

　　this.$emit('nn')

 

子传父：

方法一：

　　1.父级需要定义一个修改数据的方法　

fn = () => {
　let { num } = this.state;
　num++;
　this.setState({ num })
}

 

　　2.把修改数据的方法传给子组件

render() {
　return (
　　<div>
　　　<Ppa {...{
　　　　Fn: this.fn
　　　}} />
　　</div>
　)
}

　　3.当子组件需要修改父级数据的时候，调用父级传过来的修改方法

add = () => {
　let { Fn } = this.props;
　Fn()
}

 　　　　

方法二：(把父级的数据变成子级，子级的数据不跟父级的数据有瓜葛了)

　　1.把父级的数据变成子级的

constructor(props){
　super(props);
　this.state = {
　　cn: props.num
　}
}

　　2.子级修改

add = () => {
　let { cn } = this.state;
　cn++;
　this.setState({ cn })
}

 

生命周期：

　　分三个大阶段：mounting、updating、unmounting

　　回调函数（钩子函数、生命周期函数）：当某个条件（事务）成立之后触发的函数

　　mounting

　　　　只会执行一次：

 

　　　　　　constructor  -> 数据的初始化 ***

　　　　　　componentWillMount   组件挂载之前

　　　　　　render   解析jsx ***

　　　　　　componentDidMount   挂载成功 ***  数据请求 时

  　　　

　　　　　　 componentWillMount方法的调用在constructor之后，在render之前，在这方法里的代码调用setState方法不会触发重渲染，

　　　　　　所以它一般不会用来作加载数据之用，它也很少被使用到。 

　　　　　　验证：

　　　　　　　　在 render中打印 this.state的数据

　　　　　　　　如果在componentWillMount中调用 setState,那么 render中打印 this.state，

　　　　　　　　第一次是数据初始化的状态，第二次是改变之后的状态（异步请求）

 

　　updating

　　　　当数据改变的时候触发：

 

　　　　　　componentWillReceiveProps **   当父级的数据变化才执行 

 

　　　　　　shouldComponentUpdate (nextProps,nextState)**  优化性能，接下来的组件要不要更新 

　　　　　　　　如果写了shouldComponentUpdate，就一定要有返回值return true，不然为false。

　　　　　　　　不写这个钩子函数默认返回一个true，只有在true的情况下，下面三个钩子函数才会执行

 

　　　　　　componentWillUpdate

 

　　　　　　render ***   

　　　　　　　　（类似于Vue中的computed：一上来执行一遍，数据变化的时候就会执行）

　　　　　　componentDidUpdate **   当子级的更新完成才会执行父级的componentDidUpdate

　　　　　　　　（类似于Vue中的watch，但不再是监听指定的数据，而是所有的数据变化都会触发。一上来不触发，数据改变就触发）

 　　　　　　　

　　unmounting

　　　　组件卸载的时候：

 　　　　

　　　　　　componentWillUnmount *** 关闭定时器，清除格式事件...

　　　　注意：关闭页面，此生命周期来不及出发，所以清除 localStorage 信息不能在此执行。一般可以在 onbeforeunload 事件中执行。

　　　　下面稍微介绍一下这个事件：

　　　　onbeforeunload 事件在即将离开当前页面（刷新或关闭）时触发。

// body 支持此事件 
<body onbeforeunload="myScript">
// 可以挂在 window 上
window.onbeforeunload=function(){myScript};
// 时间监听的方法
window.addEventListener("beforeunload", myScript);

生命周期使用举例：

shouldComponentUpdate(nextProps, nextState)

// 当state中的data发生改变的时候才触发render（返回 true 时触发 render）
shouldComponentUpdate(nextProps, nextState) {
  if (nextState.data !== this.state.data) {
    return true
  }
  return false
}

componentWillReceiveProps(nextProps)

componentWillReceiveProps(nextProps) {
  if (nextProps.params !== this.props.params) {
    console.log("do something")
  }
}

以上是 2.React数据传递 之☞ 父子之间数据传递 / React生命周期 的全部内容， 来源链接： utcz.com/z/382232.html

回到顶部