博客列表 >React类组件和函数组件

React类组件和函数组件

南瓜又个梦
南瓜又个梦原创
2022年04月14日 21:41:42604浏览

关于命名,组件第一个字母大写,元素小写,

类组件和函数组件

  • 元素与组件
    const div=React.createElement(‘div’,…)
    这是一个React元素(d要小写)
    const Div=()=>React.createElement(‘div’,…)
    这是一个React组件(D大写)
  • 什么是组件
    能和其他物件组合起来的物件,就是组件
    组件并没有明确的意义,
    就目前而言,一个返回React元素的函数就是一个组件
    在Vue里面一个构造选项就是一个组件
  • React函数组件
    function Welcome(props){
    retuen <h1> hello{props.name}</h1>
    }
    使用方法 < Welcome name=’Tom’ />
  • 类组件
    class Welcome extends React.Component{
    render(){
    return <h1> hello{this.props.name}</h1>
    }
    }
    使用方法 < Welcome name=’Tom’ />
  • Welcome会被bable翻译成什么
    <div />会被翻译成React.createElement(‘div’)
    <Wlecome />会被翻译成React.createElement(Wlecome)
  • React.createElement的逻辑
    如果传入一个字符串’div’会创建一个div
    如果传入一个函数,会调用该函数,获取返回值
    如果传入的是一个类,则在类前面加new,获取一个组件对象,然后调用组件的runder方法,获取返回值。
  • 两种组件的例子
    https://codesandbox.io/s/exciting-meninsky-9foduf

    如何使用state和props

    props
    类组件直接读取属性this.props.xxx
    函数组件直接读取props.xxx
    https://codesandbox.io/s/holy-meadow-8vg2ng
    state
    类组件用this.state读,this.setState写
    函数组件用usestate返回函数读写,第一个读,第二个写
    写最好用函数
    https://codesandbox.io/s/strange-marco-vwt0bx

    类组件的注意事项

    this.state.n+=1是无效的吗
    n已经改变了只不过UI没有自动更新
    调用setstate才会触发更新
    因为reacr里没有对数据进行监听

    setstate会异步更新

    setstate之后会异步更新UI,马上读state数据不会更新
    更推荐的方法是setState(函数)获取新值或者做相关的处理,会更方便
    this.setState(this.state)不推荐
    React希望我们不要修改旧的state
    常用代码
    setState({n:state.n+1})

    函数组件的注意事项

    和类组件相似的地方
    也要通过setX(新值)的方式更新数据
    不同
    没有this用变量和参数

    复杂的state

    如果数据不知一个
    类组件里,更新某个state数据时其他数据会沿用上一次的数据,会数据合并,但只合并一层的数据,
    那就使用object.assign()或者【…】操作符
    函数组件的setX就完全不会帮忙合并
    需要用b[…]去展开

    如何绑定事件

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议