7.7知识点

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>        
        )    
    }
}