1.React.createElement()
jsx语法是React.createElement()的语法糖
虚拟dom
本质是一个js对象(类型为Object)
虚拟dom属性比较少(轻),真实dom属性方法比较多,因为在react内部使用,没有挂载到真实dom中,所以不用很多真实dom中的属性。(虚拟dom用console.log()打印,真实dom用console.dir()打印),react中的虚拟dom最终会转换为真实dom
2.react组件化开发
模块化针对的是js
组件概念:组件是构建用户界面的基本单位，它可以是可重用的、自包含的、拥有自己的状态和生命周期的独立模块。(React里允许我们将UI视图(界面)拆分成可复用的代码片段，并对每个片段单独构思，我们将每个独立的UI片段称为"组件")
优势:提高代码的复用率,便于维护
分类:(首字母必须大写)
3.函数组件 :
使用js函数创建的组件,需要返回html结构
没有this,为undefined
4. 类组件 :
通过class定义组件,需要继承React.Component需要通过render函数返回html结构(ui结构/视图结构)
有this,指向当前类组件实例
5.定义组件注意事项:
(1)首字母大写,React会根据大小写来判断是组件还是普通标签
(2)函数组件必须有返回值,返回值是页面结构,如果不需要返回任何内容,需要设置为null
(3)组件调用直接写标签就行,单标签/双标签均可
组件获取事件对象执行的第一个参数为事件对象
如果需要另外传参,则需要回调函数包裹
类组件： <button onClick={(e)=>this.clickHandler(e,'hello')}>clickHandler</button>
函数组件 : <button onClick={(e)=>handler(e,2000)}>handler</button>
改变类组件中的this指向的方法:将该方法用一个回调函数来包裹,还可以进行传参
6.类组件定状态
函数组件里面不能直接定状态,需要借助hooks
类组件:通过state属性对象定义状态,在state中可以定义任何数据类型的状态,通过setState方法修改状态
注意:
1)不可直接修改state里面的状态
2)如果同时修改多个状态,建议将状态放置在一个setState中去修改,尽可能少的使用setState
setState修改数据,渲染到页面的过程是异步过程,所以获取到的数据是更新前的数据
setState的第一个参数为对象,用来定义状态的;第二个参数是回调函数,用来获取更新之后的数据
calss App extends React.Component{state={ //state为普通的Object对象num:10,str:'hello',}clickHandler(){console.log('触发了')console.log(this.state)this.setState({//num:this.state.num++ 这个是直接修改num:this.state.num+1,str:'胡歌' },()=>{console.log(this.state.num)//获取更新之后的数据 }) }render(){ //类组件通过render函数返回类组件return (<div><h3>App</h3><p>num:{this.state.num}</p><button onClick={()=>this.clickHandler()}>clickHandler</button></div> ) }
}
)
)
