一：JSX
概念：通过在JavaScript中编写XML来构建界面
使用：
const name = ‘cyp’;
const title = “<p>Hello {name}</p>”;
.render(title,document.getElementById('root'))
优点：需要处理的业务逻辑以及渲染标签全封装在一起   只需要关注某一个独立组件；
注意事项：
        1.需要根标签包裹
        2.元素属性驼峰命名
        3.使用{}包裹表达式
二：组件定义
1.函数
function Todo (props) {
   const msg = 'hello world’;
   return (
     <div>
        <p>{msg}</p>
        <p>{props.name}<p>
     </div>
   )
}
ReactDOM.render(
   <Todo name=‘cyp’ />,
   document.getElementById('root')
)

2.class

class Todo extends React.Component {
   render() {
     return (
       <p>hello world</p>
     )
   }
}
区别：
    class通过render去渲染；
    函数方式更多的是直接读取然后渲染  class方式可以进行一些数据以及状态的更新修改；
    class可以定义生命周期；
    class可以通过在构造函数里使用state初始化一些数据 并且可以通过setState去进行更新修改；
 
 
    两种方式都是用来定义组件 并且可以通过代码拆分细分每一个模块的组件；
    可以在内部书写表达式 运算符 条件判断。
class内部方法以及生命周期
class todo extends React.Component {   
  constructor(props) {        
    Super(props);        
    this.state = {            
      name:’cyp’;            
      age: props.age，            
      likeTodo:[’sleep’,’eat’,’music']       
    }   
  }    
  //DOM渲染后执行    
  componentDidMount() {}    
  //即将销毁阶段    
  componentWillUnmonent() {}    
  changeName() {        
    this.setState({name:’World’})  //需挂载在setState()方法上 使用this.state.name更改不会重新渲染    
  }    
  render() {        
    return (            
      <div>                
        <p>Hello {this.state.name}</p>                
        <button onCick={changeName()}>click me</button>                
        {                    
          this.state.likeTodo.map((item)=>{                        
            return <p>{item}</p>                    
          })                
        }            
      </div>        
    )    
  }
}
三：组件插槽
            props.children


永远年轻，永远热泪盈眶。