关于React

最新推荐文章于 2025-02-17 17:07:48 发布

原创最新推荐文章于 2025-02-17 17:07:48 发布 · 165 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

React 专栏收录该内容

5 篇文章

订阅专栏

本文深入探讨React的虚拟DOM机制，解析JSX语法与样式应用，对比函数组件与类组件特性，阐述props与state在组件间传递及状态管理的关键作用。

React

把虚拟DOM渲染到真正DOM中
- ReactDom.render(组件，document.getElementById(根元素))
虚拟DOM提升性能：虚拟DOM最大特点是只更新变化的内容，不变的内容就地复用

JSX语法: {},相当于vue的 {{}}

style={{key:val,key:val}} //第一个大括号为jsx语法，第二个大括号为style内写法

或使用
    let boxStyle = {
            "color":"chocolate"
    }
    <h3 style = {boxStyle} > {3>2?3:2}</h3>

组件声明：函数名大写

函数组件:
	语法:function App(){return (jsx)} //函数名大写
	如：	
	  function App( ) {//函数组件名必须大写
            return (
                <div>
                    <h2>函数声明的组件</h2>
                </div>
            )
        }

类组件: 语法: class App extends React.Component{render() {return jsx}}
		如 ：  class App extends React.Component{
            render(){
                return(
                    <div>
                        <h1>class声明的组件</h1>
                    </div>
                )}
  			 }

类组件和函数组件的区别：

函数组件和类组件都可以传入props，但是传入方式不同，函数组件直接接受形参的方式传入props
类组件使用this.props传入
函数组件也叫做无状态组件，没有state状态和生命周期，类组件又叫做有状态组件，组件中可以使用state状态和生命周期
无状态组件性能比有状态组件性能高，在组件内不进行数据变动的时候要使用无状态组件

props值的作用: props是一个传入组件的参数，可以传入任何数据类型，主要作用是提高组件的复用率，一般情况下是进行父组件向子组件传值去使用，props是不能改动的，只是进行固定内容的渲染那使用
Props的只读性：所有React组件都必须像纯函数一样保护它们的props不被更改
React组件中state状态的作用：React把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染UI，让用户界面和数据保持一致。React里，只需要更新组件的state，然后根据新的state重新渲染用户界面（不要操作DOM）
state作用把组件中要根据时间推移或者用户动作改变的一些数据放在state中,所以state是存放初始化数据,需要改变的数据一个数据类型,state中的数据是可变动的
react的类组件constructor中为什么要调用super?

react中的类组件是根据es6中class语法进行分装的，子类在继承时，是没有this指向，使用super（）把父类中的this指向借用过来，this指向当前实例
setState作用: 改变状态(state)中的数据，从而重新渲染视图（HTML），不要直接改变state的值，唯一改变state值的方法就是使用setState
setState中传入的参数：

使用setState改变state中值的时候，可以传入对象，也可以传入回调函数，也可以两个同时传入，异步去修改数据时，使用回调函数形式，如果需要在方法中拿到变更过的数据时，可在回调函数中进行