一、state使用:
1、什么时候不能 设置state(或没有必要设置):
a、constructor、
2、默认的 state 值,一定要在初始化设置。因为,render 比 setState 早。
3、所有的组件中都加上 shouldComponentUpdate 生命周期,只对组件自己的props改变,才更新组件。屏蔽调 意外 的代码执行。
二、props 的使用:
1、上面地方可以正常获取 props的值
三、回调渲染模式:https://blog.csdn.net/weixin_30732487/article/details/99894871 或 https://segmentfault.com/a/1190000016885832?utm_source=tag-newest
1、这种模式中,组件会接收某个函数作为其子组件,然后在渲染函数中以 props.children 进行调用:
<Twitter username='tylermcginnis33'> {(user) => user === null ? <Loading /> : <Badge info={user} />} </Twitter>
import React, { Component, PropTypes } from 'react' import fetchUser from 'twitter' class Twitter extends Component { state = { user: null, } static propTypes = { username: PropTypes.string.isRequired, } componentDidMount () { fetchUser(this.props.username) .then((user) => this.setState({user})) } render () { return this.props.children(this.state.user) } }
四、组件传值:
1、
2、Context: https://www.cnblogs.com/littleSpill/p/11221538.html
概念:Context提供了一种方式,能够让数据在组件树中传递,而不必一级一级手动传递。
个人理解: 感觉有点想,父组件 把值给第三方保管(Context对象),孙组件,从第三方那拿值。但是这种处理,感觉不好。
一般组件,都是分不同的组件的文件的。父组件 和 孙组件要使用同一个context对象,所以,这个context 要单独放在一个文件中,供这个两个组件使用。
import React, { Component, createContext } from 'react'; const BatteryContext = createContext(); class Leaf extends Component { // 声明一个孙组件 render() { return ( <BatteryContext.Consumer> // Consumer内 回调函数,值作为参数传递进来 { battery => <h1>Battery : {battery}</h1> } </BatteryContext.Consumer> ) } } class Middle extends Component { // 声明一个子组件 render() { return <Leaf /> } } class App extends Component { // 声明一个父组件 render(){ return ( <BatteryContext.Provider value={690}> <Middle /> </BatteryContext.Provider> ); } } export default App;
最后再提示一下大家,不要滥用context,不然会影响组件的独立性。 如果一个组件中只使用一个Context的话,就可以使用contextType代替Consumer。详见 https://www.cnblogs.com/littleSpill/p/11221817.html
五、 注意事项(也可以说是避免问题):react 中 生命周期 设计的 机制,很容易引起一些问题。 组件生命周期 参考:https://www.cnblogs.com/wfblog/p/11842622.html
1、有的生命周期中不能 设置 state(或有条件的设置) 不然会 陷入死循环。比如 render,componentWillUpdate、componentDidUpdate(设置好条件才可以更新) 等。 后续在补充。。。
2、父组件一旦 设置 state ,就会递归 执行 所有 子组件的 render,有的子组件是不需要更新的 后续在补充。。。
3、ajax请求,最好还是放在使用的组件内进行请求。如果在父组件中请求,因为请求是异步,所以挂载阶段,父组件传递给子组件的props 是undefined。子组件使用 undefined 的属性,是会报错的。
如果要在父组件上 请求,需要给 props 的值,设置值。初始值可以是空对象,主要子组件使用时,不出现使用 undefined的属性,就可以。 如 undefined.name,就会报错的。
六、