Open wuyuanlijie opened 6 years ago
学会去在react中使用箭头函数,箭头函数中的this指向为:当前调用对象的所在的上下文环境,也就是当前的组件。() => {}
render () {
return (
<button onClick={ this.handleClick.bind(this, '李杰') }>点我、点我</div>
)
}
constructor(props) {
super(props);
this.handleClick = this.handle.bind(this);
}
// 这里我们也可以使用ES7的语法糖 constructor(props) { super(props); this.handleClick = ::this.handleClick; }
3. 箭头函数:会捕捉其所在的上下文this的值,作为自己的this的值。
render () { return ( <button onClick={ () => this.handleClick() }>点我、点我
// 当然我们还可以这么写 handleClick = (e) => { console.log(this.state.message) } render () { return ( <button onClick={ this.handleClick }>点我、点我
1.React组件的生命周期:
React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁
1. 初始化阶段
3. React RouterV4 在react中的使用
React RouterV4遵循了React的理念:万物皆组件。 React RouterV4基于Learn管理多个Repository,其代码库包括:
4. this.setState更新的问题
下面介绍三种方法来获取最新的数据: 1.回调函数
2.利用componentDidUpdate,因为在这个生命周期函数,说明页面已经渲染完成state、props都已经被渲染好了
3.将this.setState放入到setTimeout函数中(因为在this.setState之后this.state是立即更新的!)
5. this.props.children容器类组件
6. Props和State
如何设置一个组件state?
如何正确的修改state
React建议我们把state当作一个不可变的对象,
还可以使用slice来截取数组,使用filter来过滤数组,在setState里面参数添加一个函数,函数的参数是修改前的state。(concat、filter、slice返回一个新的数组,主要不要使用push、pop、shift、unshift、splice等方法修改数组,因为它们是在原数组的基础上修改的。)
=> React建议state不可变对象,所以当组件某个状态发生改变的时候,我们应该重新去创建一个新的状态,而不是修改原来的状态。避免重新去直接修改原对象的方法。
为什么React推荐组件的状态不可变对象?