React-2-基础知识
一、变量state和变量修改setState
state修改后,页面也会跟着响应,更新state需要使用setState。
// 初始化state this.state = { count: 0 } // 更新state this.setState({ count: this.state.count + 1 })
注意:
1.setState是异步的,同一个生命周期里会批量操作更新state,这会导致一个问题,在某个生命阶段,我们setState了某个值,但是在这个阶段我们再去获取到的其实还是原本的值,只有在生命周期结束后才会真正更新完成。解决办法:setState可以传入第二个参数,传入一个回调函数可以获取到最新的state:
componentDidMount() { this.setState({ count: 1 }, () => { console.log(this.state.count) // 这里是更新后的 }) console.log(this.state.count) // 这里是更新前的 }
2.当修改的state依赖于上一次修改的state时,可以使用一下方法:
componentDidMount(){ this.setState((prevState, prevProps) => { return {count: prevState.count + 1} }) } // 当return前不需要其他操作时,可以简写 componentDidMount(){ this.setState((prevState, prevProps) => ( { count: prevState.count+1 } )) }
二、props属性传递
在父组件中给子组件传一个参数,就可以通过子组件的this.props.xxx接收这个值
// 父组件中 <Son title="abc"></Son> // 子组件 this.props.title // 直接获取
三、条件渲染和数据循环
1.条件渲染
一般使用三目表达式判断条件:
let result = this.state.count ? 1 : 0 // 如果this.state.count,则result为1,否则为0
注意:如果想让某个东西在页面上显示,并且在一段时间后消失,可以在构造函数里设置一个定时器,将某个原本为true的属性在一段时间后设置为false即可。
2.数据循环
数据循环一般使用map:
this.state = { goods: [1, 2, 3] } this.state.goods.map(good => { return ( <li key='good'>good</li> // 循环生成的每个标签都必须有一个唯一的key,用来提高性能 ) })
四、事件监听的实现
有三种绑定事件的方式
// 方式一:在构造函数中绑定this construct(props){ super(props) this.handleClick = this.handleClick.bind(this) } handleClick() {xxx} // 方式二:绑定一个函数返回一个箭头函数 handleClick = () => {xxx} // 方式三:并定一个箭头函数返回一个函数 handleClick(){xxx} onClick={()=>handleClick()}
五、样式和属性编写
- 行内样式写法
<img style={{ width: '12', height: '12' }}>
- 添加类名,由于class与react的关键字重叠,所以需要使用className
<img className={styles.xxx}>
- 添加属性
<img src={'xxx'}>
六、双向数据绑定
construct(props){ super(props) inputVal: "请输入input" } handleChange = (e) => { this.setState({ inputVal: e.target.value }) } render() { return ( <input type="text" value={this.state.inputVal} onChange={e => this.handleChange(e)}> // e是事件对象 ) }
七、react组件的生命周期
1.componentWillMount:组件将要挂载时,这个时候我们可以进行api的调用,获取数据,但是不能进行DOM操作。
2.componentDidMount:组件已经挂载,在render渲染后,此时可以进行DOM操作,对状态进行更新操作。
3. componentWillReceiveProps:父组件传递的属性有变化,可以在这里做相应的响应操作。
4.shouldComponentUpdate:组件是否需要更新,返回布尔值,如果是true才会走下面两个生命周期并更新组件,否则不更新。
5.componentWillUpdate:组件将要更新。
6.componentDidUpdate:组件已经更新。
7.componentWillUnmount:组件已经销毁,即这个组件不再存在时。