# 1. 区分一下jsx和虚拟dom

import React from 'react'; 

let element = <h1>hello</h1>
经过babel 转译 变成
let element = React. createElement('h1', null, 'hello')

转译之后,上面这段代码会在浏览器里执行
function createElement() {
  return { type: 'h1', props: {children: 'hello'} }
}

jsx和虚拟dom

jsx是一种模板语法。经过createElement函数调用后,更多指的静态编译
虚拟dom是jsx转译后在浏览器里形成的代码解构

# 2. 受控组件与非受控组件

受控组件与非受控组件

“受控”与“非受控”两个概念,区别在于这个组件的状态是否可以被外部修改。一个 设计得当的组件应该同时支持“受控”与“非受控”两种形式,即当开发者不控制组件属性 时,组件自己管理状态,而当开发者控制组件属性时,组件该由属性控制。

例子:封装一个底部选项卡Navbar组件,根据自己的需求让合适的选项高亮

非受控组件 Tabbar1:只有111高亮,不能够按开发者的需求来控制哪一个高亮
受控组件 Tabbar2:传递index时,让第index的li高亮,不传index时,默认第0个li高亮

import React from 'react'
import '. /css/index. css'

class Tabbar1 extends React. Component{
  render(){

    return <div>
        <ul>
            <li className="active">111</li>
            <li>222</li>
            <li>333</li>
        </ul>
    </div>

  }
}

class Tabbar2 extends React. Component{
  render(){

    // 给予一个默认值 0
    var currentIndex = this.props.index === undefined ? 0 : this.props.index
    return <div>
      <ul>
        <li className={currentIndex===0?'active':''}>111</li>
        <li className={currentIndex===1?'active':''}>222</li>
        <li className={currentIndex===2?'active':''}>333</li>
      </ul>
    </div>

  }
}

class App extends React. Component{
  render() {

    return <div>
      <Tabbar1/>
      <Tabbar2 index={2}/>
    </div>

  }
}