脚本宝典收集整理的这篇文章主要介绍了React 原理详解,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
setState() 是异步更新数据
可以多次调用 setState() ,只会触发一次重新渲染
import React From 'react' import ReactDOM from 'react-dom' class Opp extends React.component { state = { count: 1, } handleClick = () => { // 异步更新数据 this.setState({ count: this.state.count + 1, }) this.setState({ count: this.state.count + 1, }) console.LOG(this.state.count) // 1 } render() { return ( <div> <h1>计数器:{this.state.count}</h1> <button onClick={this.handleClick}>+1</button> </div> ) } } ReactDOM.render(<Opp />, document.getElementById('root'))
使用 setState((state,PRops)=>{}) 语法
state:表示最新的 state, props:表示最新的 props
import React from 'react' import ReactDOM from 'react-dom' class Opp extends React.COMponent { state = { count: 1, } handleClick = () => { /* // 异步更新数据 this.setState({ count: this.state.count + 1, }) console.log(this.state.count) //1 this.setState({ count: this.state.count + 1, }) console.log(this.state.count) //1 */ // 推荐语法 this.setState((state, props) => { return { count: state.count + 1, } }) this.setState((state, props) => { console.log('第二次调用:', state) //2 return { count: state.count + 1, } }) console.log(this.state.count) // 3 } render() { return ( <div> <h1>计数器:{this.state.count}</h1> <button onClick={this.handleClick}>+1</button> </div> ) } } ReactDOM.render(<Opp />, document.getElementById('root'))
callback 是指回调函数 可加可不加
import React from 'react' import ReactDOM from 'react-dom' class Opp extends React.Component { state = { count: 1, } handleClick = () => { this.setState( (state, props) => { return { count: state.count + 1, } }, // 状态更新后并且重新渲染后,立即执行 () => { console.log('状态更新完成:', this.state.count) // 2 console.log(document.getElementById('tITle').innerText) // 计数器:2 document.title = '更新后的 count 为:' + this.state.count } ) console.log(this.state.count) //1 } render() { return ( <div> <h1 id='title'>计数器:{this.state.count}</h1> <button onClick={this.handleClick}>+1</button> </div> ) } } ReactDOM.render(<Opp />, document.getElementById('root'))
import React from 'react' import ReactDOM from 'react-dom' // JSX 语法的转化过程 // const element = <h1 classname='greeting'>Hello JSX</h1> const element = React.createElement( 'h1', { className: 'greeting', }, 'Hello JSX' ) console.log(element) ReactDOM.render(element, document.getElementById('root'))
import React from 'react' import ReactDOM from 'react-dom' class Opp extends React.Component { state = { count: 0, } handleClick = () => { this.setState((state) => { return { count: this.state.count + 1, } }) } // 钩子函数 shouldComponentUpdate(nextProps, nextState) { // 返回 false,阻止组件重新渲染 // return false // 最新的状态 console.log('最新的state', nextState) // 更新前的状态 console.log(this.state) // 返回 true,组件重新渲染 return true } render() { console.log('组件更新了') return ( <div> <h1>计数器:{this.state.count}</h1> <button onClick={this.handleClick}>+1</button> </div> ) } } ReactDOM.render(<Opp />, document.getElementById('root'))
案例:随机数
通过 nextState
import React from 'react' import ReactDOM from 'react-dom' // 生成随机数 class Opp extends React.Component { state = { number: 0, } handleClick = () => { this.setState((state) => { return { number: Math.floor(Math.random() * 3), } }) } // 两次生成的随机数可能相同,则没必要重新渲染 shouldComponentUpdate(nextState) { console.log('最新状态:', nextState, '当前状态:', this.state) return nextState.number !== this.state.number /* if ( nextState.number !== this.state.number) { return true } return false*/ } render() { console.log('render') return ( <div> <h1>随机数:{this.state.number}</h1> <button onClick={this.handleClick}>重新生成</button> </div> ) } } ReactDOM.render(<Opp />, document.getElementById('root'))
通过 nextState
import React from 'react' import ReactDOM from 'react-dom' // 生成随机数 class Opp extends React.Component { state = { number: 0, } handleClick = () => { this.setState((state) => { return { number: Math.floor(Math.random() * 3), } }) } render() { return ( <div> <NumberBox number={this.state.number} /> <button onClick={this.handleClick}>重新生成</button> </div> ) } } class NumberBox extends React.Component { shouldComponentUpdate(nextProps) { console.log('最新props:', nextProps, '当前props:', this.props) return nextProps.number !== this.props.number } render() { console.log('子组件render') return <h1>随机数:{this.props.number}</h1> } } ReactDOM.render(<Opp />, document.getElementById('root'))
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本宝典的更多内容!
以上是脚本宝典为你收集整理的React 原理详解全部内容,希望文章能够帮你解决React 原理详解所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。