React基础

最新推荐文章于 2024-10-06 16:46:45 发布
最新推荐文章于 2024-10-06 16:46:45 发布
阅读量70 收藏
点赞数
分类专栏： React 文章标签： react.js 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63443072/article/details/130664168
版权

一、简介

1.官网

英文官网:http:// https://reactjs.org/

中文官网:https://react.docschina.org/

2.介绍

  1. 用于动态构建用户界面的 JavaScript 库(只关注于视图)
  2. 由Facebook开源

3.React高效的原因

  1. 使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。

  2. DOM Diffing算法, 最小化页面重绘

4.相关js库

  1. react.js：React核心库。
  2. react-dom.js：提供操作DOM的react扩展库。
  3. babel.min.js：解析JSX语法代码转为JS代码的库。

5.创建虚拟DOM的两种方式

  1. 纯JS方式(一般不用)
  2. JSX方式

使用JS方式

 <!-- 准备好一个容器 -->
    <div id="test">
    </div>
    <!-- 1.先引入react核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 2.再引入react-dom，用于react操作dom -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script type="text/babel">/* 此处一定要写 */
        // 1.创建虚拟dom
        // const VDOM = React.createElement(标签名,标签属性,标签内容)
        const VDOM = React.createElement('h1', { id: 'title' }, React.createElement('span', {}, 'Hello,React'))
        // 2.渲染虚拟dom到页面
        // ReactDom.render(虚拟Dom,容器)
        ReactDOM.render(VDOM, document.getElementById('test'))
    </script>

使用JSX

 <!-- 准备好一个容器 -->
    <div id="test">
    </div>
    <!-- 1.先引入react核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 2.再引入react-dom，用于react操作dom -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- 3.引入babel，用于将jsx转为js -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">/* 此处一定要写 */
        // 1.创建虚拟dom
        const VDOM = (/* 此处一定不要写引号，因为不是字符串 */
            <h1 id="title">
                <span>Hello,React</span>
            </h1>
        )
        // 2.渲染虚拟dom到页面
        // ReactDom.render(虚拟Dom,容器)
        ReactDOM.render(VDOM, document.getElementById('test'))
    </script>

二、JSX

全称:  JavaScript XML

react定义的一种类似于XML的JS扩展语法: JS + XML本质是 React.createElement(component, props, ...children)方法的语法糖

作用: 用来简化创建虚拟DOM

  1. 写法：var ele = <h1>Hello JSX!</h1>

  2. 它不是字符串, 也不是HTML/XML标签

  3. 它最终产生的就是一个JS对象

基本语法规则：

  1. 定义虚拟dom时，不需要写引号。
  2. 标签中混入js表达式时要用{}。

  3. 样式的类名不要用class，用className。

  4. 内联样式，要用style={{key:value}}的形式去写。

  5. 虚拟dom只有一个跟标签。

  6. 标签必须闭合。

  7. 标签首字母：

    (1).若小写字母开头，则将该标签转为html中同名元素，若html无该标签对应的同名元素则报错。(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

bable.js的作用：

  1. 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行

  2. 只要用了JSX，都要加上type="text/babel", 声明需要babel来处理

例子：

 <!-- 准备一个容器 -->
    <div id="test"></div>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <script type="text/babel">
        const myId = 'aTgUiGu'
        const myData = 'Hello,rEact'
        // 1.创建虚拟dom
        const VDOM = (
            <div>
                <h2 id={myId.toLocaleLowerCase()} className="title">
                    <span style={{color:'white',fontSize:'20px'}}>{myData.toLocaleLowerCase()}</span>
                </h2>
                <input/>
            </div>
        )
        // 2.渲染虚拟dom的页面
        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>

一定注意区分：【js语句(js代码)】与【js表达式】

表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方，下面这些都是表达式：

  • a

  • a+b

  • demo(1)

  • arr.map()

  • function test () {}

语句(代码)：

  • if(){}

  • for(){}

  • switch(){case:xxxx}

三、组件

1.组件分类

（1）函数式组件

函数式组件即函数定义的组件。

例如：

  <div id="test"></div>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <script type="text/babel">
        // 1.创建函数式组件
        function Demo(){
            console.log(this);//此处的this是undefined，因为babel编译后开启了严格模式
            return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
        }
        // 2.渲染组件到页面
        ReactDOM.render(<Demo/>,document.getElementById('test'))
        /*
            执行了ReactDOM.render(<Demo/>......之后，发生了什么？
                1.react会解析组件标签，找到了Demo组件
                2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟dom转为真是dom，随后呈现到页面中
        */
    </script>

（2）类式组件

例如：

<div id="test"></div>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <script type="text/babel">
        // 1.创建类式组件
        class Mycomponent extends React.Component {
            render() {
                // render是放在那里的？ 类的原型对象上，供实例使用。
                // render的this是谁？ Mycomponent的实例对象。<=> Mycomponent组件实例对象
                return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>
            }
        }
        // 2.渲染组件到页面
        ReactDOM.render(<Mycomponent/>,document.getElementById('test'))
        /*
            1.react会解析组件标签，找到了Mycomponent组件
            2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用的原型上的render方法。
            3.将虚拟dom转为真实dom，随后呈现在页面中。
        */
    </script>

注意点：

  1. 组件名必须首字母大写
  2. 虚拟DOM元素只能有一个根元素
  3. 虚拟DOM元素必须有结束标签

基本流程：

  1. React内部会创建组件实例对象

  2. 调用render()得到虚拟DOM, 并解析为真实DOM

  3. 插入到指定的页面元素内部

2.组件的三大核心

（1）state

state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)

组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

用法案例：

<div id="test"></div>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <script type="text/babel">
        class Weather extends React.Component{
            // 初始化状态
            state = {isHot:true}
            render(){
                const {isHot} = this.state
                return <h1 onClick={this.changeWeather}>今天天气很{isHot?'炎热':'凉爽'}</h1>
            }
            // 自定义方法   要用赋值语句的形式+箭头函数
            changeWeather = ()=>{
                const isHot = this.state.isHot
                this.setState({isHot:!isHot})
            }
        }
        ReactDOM.render(<Weather/>,document.getElementById('test'))
    </script>

注意：

  1. 组件中render方法中的this为组件实例对象。
  2. 状态数据，不能直接修改或更新，需要使用setState方法修改。

（2）props

每个组件对象都会有props(properties的简写)属性

组件标签的所有属性都保存在props中

作用：通过标签属性从组件外向组件内传递变化的数据

注意: 组件内部不要修改props数据，在函数是组件中只能使用组件三大核心中的props。

用法：

  1. 内部读取某个属性值：this.props.name

  2. 对props中的属性值进行类型限制和必要性限制

第一种方式（React v15.5 开始已弃用）：

Person.propTypes = {
 name: React.PropTypes.string.isRequired,
 age: React.PropTypes.number
}

第二种方式（新）：使用prop-types库进限制（需要引入prop-types库）

Person.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number. 
}

        3. 扩展属性: 将对象的所有属性通过props传递 ：<Person {...person}/>

        4. 默认属性值：

Person.defaultProps = {
  age: 18,
  sex:'男'
}

        5. 组件类的构造函数

constructor(props){
  super(props)
  console.log(props)//打印所有属性
}

 例如：

<div id="test"></div>
    <div id="test1"></div>
    <div id="test2"></div>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <!-- 引入prop-types，用于对组件标签进行限制 -->
    <script src="../js/prop-types.js"></script>
    <script type="text/babel">
        // 创建组件
        class Person extends React.Component {
            // 对标签属性进行类型、必要性限制
            static propTypes = {
            name:PropTypes.string.isRequired, // 指定name为字符串类型且必传
            age:PropTypes.number,   // 指定age为数字类型
            sex:PropTypes.string,   // 指定sex为字符串类型
            speak:PropType.func   // 指定speak为函数类型
            }
            // 设置默认值
            static defaultProps = {
                sex:'男',
                age:18
            }
            render(){
                const {name,age,sex} = this.props
                // props是只读的
                // this.props.name = 'jack'    // 此行代码会报错，因为props是只读的
                return (
                    <ul>
                        <li>姓名:{name}</li>
                        <li>性别:{sex}</li>
                        <li>年龄:{age}</li>
                    </ul>
                )
            }
        }
        // 渲染组件
        ReactDOM.render(<Person name="tom" sex="女" age={18} speak={speak}/>,document.getElementById('test'))
        ReactDOM.render(<Person name="jerry" sex="男" age={19}/>,document.getElementById('test1'))
        const p = {name:'老刘',age:18,sex:'女'}
        ReactDOM.render(<Person {...p}/>,document.getElementById('test2'))
        function speak(){
            console.log('我说话了');
        }
    </script>

 （3）refs

组件内的标签可以定义ref属性来标识自己

用法：

  1. 字符串形式的ref：<input ref="input1"/>

  2. 回调形式的ref：<input ref={(c)=>{this.input1 = c}} （开发常用）

  3. createRef创建ref容器
myRef = React.createRef() 
<input ref={this.myRef}/>

案例：

字符串形式

<script type="text/babel">
        // 创建组件
        class Demo extends React.Component {
            showData = () => {
                let { input1 } = this.refs
                alert(input1.value)
            }
            showData1 = () => {
                let { input2 } = this.refs
                alert(input2.value)
            }
            render() {
                return (
                    <div>
                        <input type="text" placeholder="点击按钮提示数据" ref="input1" />
                        <button onClick={this.showData} ref="button100">点我提示左侧输入框数据</button>
                        <input type="text" placeholder="失去焦点提示数据提示数据" ref="input2" onBlur={this.showData1} />
                    </div>
                )
            }
        }
        // 渲染组件
        ReactDOM.render(<Demo />, document.getElementById('test'))
    </script>

回调形式

<script type="text/babel">
        // 创建组件
        class Demo extends React.Component {
            showData = () => {
                let { input1 } = this
                alert(input1.value)
            }
            showData1 = () => {
                let { input2 } = this
                alert(input2.value)
            }
            render() {
                return (
                    <div>
                        <input ref={c => this.input1 = c} type="text" placeholder="点击按钮提示数据" />
                        <button onClick={this.showData}>点我提示左侧输入框数据</button>
                        <input type="text" placeholder="失去焦点提示数据提示数据" onBlur={this.showData1} ref={c => this.input2 = c} />
                    </div>
                )
            }
        }
        // 渲染组件
        ReactDOM.render(<Demo />, document.getElementById('test'))
    </script>

createRef创建ref容器

<script type="text/babel">
        // 创建组件
        class Demo extends React.Component {
            // React.createRef()调用后可以反会一个容器，该容器可以存储ref所标识的节点,该容器是专人专用的
            myRef = React.createRef()
            myRef2 = React.createRef()
            showData = () => {
                alert(this.myRef.current.value);
            }
            showData1 = () => {
                alert(this.myRef2.current.value)
            }
            render() {
                return (
                    <div>
                        <input ref={this.myRef} type="text" placeholder="点击按钮提示数据" />
                        <button onClick={this.showData}>点我提示左侧输入框数据</button>
                        <input type="text" placeholder="失去焦点提示数据提示数据" onBlur={this.showData1} ref={this.myRef2} />
                    </div>
                )
            }
        }
        // 渲染组件
        ReactDOM.render(<Demo />, document.getElementById('test'))
    </script>

3.包含表单的组件分类

（1）受控组件

<script type="text/babel">
      class Login extends React.Component{
        state = {
            username:'',
            password:''
        }
        saveUsername = (event)=>{
            this.setState({username:event.target.value})
        }
        savePassword = (event)=>{
            this.setState({password:event.target.value})
        }
        handleSubmit = (event)=>{
            // 阻止默认提交
            event.preventDefault()
            const {username,password} = this.state
            alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
        }
        render(){
            return (
                <form action="http://www.atguigu.com" onSubmit={this.handleSubmit}> 
                    用户名：<input type="text" name="username" onChange={this.saveUsername} />
                    密码：<input type="password" name="password" onChange={this.savePassword} />
                    <button>登录</button>
                </form>
            )
        }
      }
        // 渲染组件
        ReactDOM.render(<Login />, document.getElementById('test'))
    </script>

（2）非受控组件

 <script type="text/babel">
      class Login extends React.Component{
        handleSubmit = (event)=>{
            // 阻止默认提交
            event.preventDefault()
            const {username,password} = this
            alert(`你输入的用户名是：${username.value},你输入的密码是：${password.value}`)
        }
        render(){
            return (
                <form action="http://www.atguigu.com" onSubmit={this.handleSubmit}> 
                    用户名：<input type="text" name="username" ref={c =>this.username=c} />
                    密码：<input type="password" name="password" ref={c =>this.password=c} />
                    <button>登录</button>
                </form>
            )
        }
      }
        // 渲染组件
        ReactDOM.render(<Login />, document.getElementById('test'))
    </script>

4.组件生命周期

（1）旧生命周期

 生命周期的三个阶段（旧）

初始化阶段: 由ReactDOM.render()触发---初次渲染

  1. constructor()
  2. componentWillMount()
  3. render()
  4. componentDidMount()

更新阶段: 由组件内部this.setSate()或父组件重新render触发

  1. shouldComponentUpdate()

  2. componentWillUpdate()

  3. render()

  4. componentDidUpdate()

卸载组件: 由ReactDOM.unmountComponentAtNode()触发

        componentWillUnmount()

（2）新生命周期

 生命周期的三个阶段（新）

初始化阶段: 由ReactDOM.render()触发---初次渲染

  1. constructor()

  2. getDerivedStateFromProps

  3. render()

  4. componentDidMount()

更新阶段: 由组件内部this.setSate()或父组件重新render触发

  1. getDerivedStateFromProps

  2. shouldComponentUpdate()

  3. render()

  4. getSnapshotBeforeUpdate

  5. componentDidUpdate()

卸载组件: 由ReactDOM.unmountComponentAtNode()触发

        componentWillUnmount()

（3）重要钩子

  1. render：初始化渲染或更新渲染调用

  2. componentDidMount：开启监听, 发送ajax请求

  3. componentWillUnmount：做一些收尾工作, 如: 清理定时器

（4）即将废弃的勾子

  1. componentWillMount

  2. componentWillReceiveProps

  3. componentWillUpdate

现在使用会出现警告，下一个大版本需要加上UNSAFE_前缀才能使用，以后可能会被彻底废弃，不建议使用。

新增钩子getDerivedStateFromProps的使用场景：使用罕见，若state的值在任何时候都取决于props，那么可以使用。

新增钩子getSnapshotBeforeUpdate的使用场景：

 <script type="text/babel">
        class NewsList extends React.Component {
            state = {
                newsArr: []
            }
            componentDidMount() {
                setInterval(() => {
                    const { newsArr } = this.state
                    // 模拟新闻
                    const news = '新闻' + (newsArr.length + 1)
                    // 更新状态
                    this.setState({ newsArr: [news, ...newsArr] })
                }, 1000);
            }
            getSnapshotBeforeUpdate() {
                return this.refs.list.scrollHeight
            }
            componentDidUpdate(preProps, preState, height) {
                this.refs.list.scrollTop += this.refs.list.scrollHeight - height
            }
            render() {
                return (
                    <div className="list" ref="list">
                        {
                            this.state.newsArr.map((n, index) => {
                                return <div className="news" key={index}>{n}</div>
                            })
                        }
                    </div>
                )
            }
        }
        ReactDOM.render(<NewsList />, document.querySelector('#test'))
    </script>

四、高阶函数和函数柯里化

1.高阶函数

如果一个函数符合下面两个规范的任何一个，那该函数就是高阶函数：

  1. 若a函数，接收的参数是一个函数，那么a函数就可以称之为高阶函数。

  2. 若a函数，调用的返回值依然是一个函数，那么a就可以称之为高阶函数。

案例：

<script type="text/babel">
        class Login extends React.Component {
            state = {
                username: '',
                password: ''
            }
            saveFormData = (dataType) => event => this.setState({ [dataType]: event.target.value })
            handleSubmit = (event) => {
                // 阻止默认提交
                event.preventDefault()
                const { username, password } = this.state
                alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
            }
            render() {
                return (
                    <form action="http://www.baidu.com" onSubmit={this.handleSubmit}>
                        {/* onChange={this.saveFormData('username')}意思是将this.saveFormData('username')函数的返回值交给了onChange */}
                        用户名：<input type="text" name="username" onChange={this.saveFormData('username')} />
                        密码：<input type="password" name="password" onChange={this.saveFormData('password')} />
                        <button>登录</button>
                    </form>
                )
            }
        }
        // 渲染组件
        ReactDOM.render(<Login />, document.getElementById('test'))
    </script>

2.函数柯里化

通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。

简例：求和案例

 function sum(a) {
            return (b) => {
                return c => {
                    return a + b + c
                }
            }
        }
 const result = sum(1)(2)(3)

海上彼尚
关注
专栏目录
React基础知识
m0_51207602的博客
01-28 1520
React 1.声明式编程和函数式编程 声明式编程是一种编程范式，它关注的是你要做什么，而不是如何做。它表达逻辑而不显式地定义步骤。下面是一个例子，数组中的每个元素都乘以 2，我们使用声明式map函数，让编译器来完成其余的工作，而使用命令式，需要编写所有的流程步骤。而命令式编程描述了如何做 下面是一个例子，数组中的每个元素都乘以 2，我们使用声明式map函数，让编译器来完成其余的工作，而使用命令式，需要编写所有的流程步骤。 const numbers = [1,2,3,4,5]; // 声明式 const
React基础.pdf
06-17
### React基础知识点详解 #### 一、React简介与特点 **React**是由Facebook开发并维护的一个用于构建用户界面的JavaScript库。它通过一种创新的方法，实现了高效、灵活且可维护的UI开发流程。React的核心优势在于...
react 基础
weixin_38822843的博客
11-08 1929
什么是react？ react脚手架的基本使用 jsx react组件的使用 state的基本使用 目录 什么是react？ react脚手架的基本使用 jsx react组件的使用 state的基本使用
React基础语法
2401_85869239的博客
06-24 872
组件表示的是一段结构内容，对于函数组件来说，渲染的内容是函数的返回值就是对应的内容。1．组件的名称必须首字母大写，react内部会根据这个来判断是组件还是普通的HTML标签。2．函数组件必须有返回值，表示该组件的UI结构;类组件应该继承React.Component父类，从而使用父类中提供的属性和方法。状态：就相当于Vue中的data中数据，自己内部可以调用的属性或方法。4．使用函数名称作为组件标签名称，可以成对出现也可以自闭合。这样写回调函数中的this指向的是当前对象组件中的实例对象。
React基础讲解
stay_少年的博客
07-26 1404
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、React是什么？二、如何使用1.基于浏览器的模式babel代码如下：2.利用react 创建视图3.JSX4.插值表达式代码示例5.条件输出输出数据类型列表渲染条件渲染6.列表循环基于自动化的集成环境模式 - create-react-app - 脚手架安装与使用安装yarn使用npx项目目录结构说明命令脚本npm start类式组件代码示例props 和 stateprops 与 state 的区别组件通信与数据流数据代
React基础入门
donglize521521的博客
09-24 4050
React系列二 - 核心JSX语法一 React系列二 - 核心JSX语法二 React系列三 - 阶段案例练习
React基础写法
沉淀，积累、进步
04-06 1240
react 历史、简单使用以及生命周期
react基础
qq_30351747的博客
06-15 1455
react基础
React 基础文档
19年的墨先生的博客
02-09 2803
一. React的基本使用 1.1 相关js库 react.js：React核心库。 react-dom.js：提供操作DOM的react扩展库。 babel.min.js：解析JSX语法代码转为JS代码的库。 1.2 hello,react <!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入react核心库 --> <script type="text/javascript" src="../js/r
React 基础
chinusyan的专栏
10-26 603
React 基础
回顾Javascript React基础
10-16
## Javascript React基础回顾 ### 前言 在现代前端开发中，React已经成为了一种不可忽视的技术。它不仅仅是一个库，更是一个能够通过组件化的方式构建用户界面的强大平台。React 的核心理念是声明式的、高效的以及...
react基础文档、学习文档资料
07-11
一、React基础 1. JSX语法：React引入了一种名为JSX的语法糖，它是JavaScript和XML的混合体，允许我们在JavaScript中编写类似HTML的结构，便于创建和操作虚拟DOM。 2. 组件化：React的核心理念是组件。组件是可复用...
react基础文件.zip
06-04
"react基础文件.zip"可能包含一系列学习React基础的资源，如代码示例、教程文档等。让我们深入探讨React的基础知识。 1. **React组件**：React的核心概念是组件，它是可重用的代码块，可以独立渲染HTML到DOM。组件...
JavaScript：前端框架入门：React基础
07-14
### JavaScript：前端框架入门：React基础 #### 一、React简介与环境搭建 ##### 1. React的历史与特点 **1.1 React的历史** React是由Facebook开发并维护的一个用于构建用户界面的JavaScript库。它最初在2013年...
React18新特性
警警的博客
10-06 926
同时，需要注意的是，React 18的并发特性和新Hooks是基于Fiber架构实现的，它们共同构成了React 18中强大的渲染和控制能力。React 18的并发渲染（Concurrent Rendering）是一个革命性的特性，它通过一系列技术和API的引入，改变了React应用的渲染方式，使得渲染过程更加高效且可控。React 18的并发渲染（Concurrent Rendering）是一个革命性的特性，它通过一系列技术和API的引入，改变了React应用的渲染方式，使得渲染过程更加高效且可控。
React常见优化问题
警警的博客
10-06 813
使用React.memo可以缓存组件的渲染结果，当props没有变化时，React将不会重新渲染该组件，而是直接返回上次的渲染结果。案例描述：当函数组件中的函数被传递给子组件作为props，并且该函数在每次渲染时都重新创建时，子组件可能会因为接收到新的函数引用而重新渲染。React组件的渲染是由其props或state的变化触发的。案例描述：当组件中需要进行昂贵的计算，而这些计算的结果在props没有变化时不会改变时，可以使用useMemo来缓存这些计算结果，避免在每次渲染时都进行重复计算。
【React】事件机制
小秀的博客
10-06 800
onClick 并不会将事件代理函数绑定到真实的 DOM节点上，而是将所有的事件绑定到结构的最外层（document，减少内存开销），使用一个统一的事件去监听。事件监听器维持了一个映射保存所有组件内部的事件监听和处理函数，当组件挂载或者卸载时，在事件监听器上插入或者删除一些对象。react 基于浏览器的事件机制自身实现了一套事件机制，称为合成事件。比如：onclick -> onClick。事件发生 -> 事件处理器 -> 映射真实事件处理函数并调用。获取原生事件：e.nativeEvent。
【React】setState 的同步异步问题
最新发布
小秀的博客
10-06 519
2）在所有的同步代码执行完之后，React 调度机制会统一处理这些队列中的更新，将多次 setState 进行合并（将多次状态改变完成后，再统一对 state 进行改变，然后触发 render），批量处理。setState 的第二个参数是一个回调函数，会在 setState 更新（因为批量更新，所以实际上是所有状态更新全部完成后才会执行这个回调函数）并重新渲染组件后被调用，所以这时我们可以获取最新值。3）React 根据更新对象对组件进行合并更新，只在最后一次调用时实际渲染更新后的 DOM。
React基础教程：state与组件生命周期详解
"React基础与State管理" 在React开发中，`state`是管理组件内部数据的关键部分。本文将深入探讨React中的`state`以及React基础用法。 首先，React是一个用于构建用户界面的JavaScript库，它允许我们通过声明式编程...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值