react基础

一、jsx语法

1.方便js中书写html模板,javascript与html混合写法
2.jsx语法介绍

只有个根节点
{} js表达式
{/* 注释内容*/}
className定义类名
样式对象会自动展开
数组可以包含html ,并自定展开

二、react的组件

1.函数组件

function App(){
    return <div> ... </div>
}
export default App;

2.类组件

import React,{Componet} from 'react'

class App extends Componet {
    constructor(props){
        super(props)
    }
    state = {num:5}
   render(){
      return <div></div>
   }
}

export default App

3.区别

函数组件通常展示
类组件通常做为容器

类组件可以有state,管理数据用类组件
函组件没有state

函组件没有this
类组件 有this

函数组件没有生命周期
类组件有生命周期

三、react的组件

1.文本

普通文本: { 文本内容}
html文本: <div dangerouslySetInnerHTML=={{__html:html文本内容}}>

2.条件渲染两个方法

{flag&&<h1>为true显示</h1>}
{flag?'true显示':'false显示'}

3.列表渲染

{list.map(item=><h3 key={item}>{item}</h3>)}

四，事件

1.和原生js事件一致 事件命名用驼峰式
2.事件总是要响应一个函数
3.事件响应 箭头函数

<h1 oncClick={()=>{ alert("abc")}}>

4.事件响应定义好的函数

doit = ()=>{ alert("你好")}
<h1 onClick={this.doit}>

5.事件传参

<h1 onClick={()=>{this.add(参数)}}>
<h2 onClick={this.add.bind(this,参数)}>

五，state

1.react组件的状态/数据
2.this.setState({k:新的值})
3.当state发生变化,引用state的视图会自动更新

六，表单的数据绑定

<input  value={this.state.msg} onChange={this.changeMsg}>
changeMsg=e=>this.setState({msg:e.target.value})