React的基础介绍

react 是什么

React 是一个为数据提供渲染为 HTML 视图的开源 JavaScript 库

jsx 语法糖 javascript xhtml

用jsx 来描述组件的虚拟dom(下面return包裹的)

let Component = React.createClass({
    render() {
      return(
        <div>
         今天天气真好
        </div>
      )
    },
  })

xhtml 严格模式的HTML

1. 必须只有一个根源
2. 标签必须闭合

创建组件

引入文件 提供 react、reactdom对象 帮助浏览器解析jsx
注意：组件名一定要大写

let Component = React.createClass({
  render(){
    return ( jsx )
  }
})
ReactDOM.render(组件名，要挂载的元素)

数据承载

state 组件内部的数据 可以修改
getInitailState 生命周期初始化

getInitialState(){ //15.3版本
    console.log('初始state的生命周期')
    return {
      name:'张三'
    }
  },

props 来自于组件外部的数据 组件内部不能修改
用过getDefaultProps 进行初始化
外部传递和组件内部初始化同时存在以外部传递优先

getDefaultProps(){//15.3版本
    console.log('初始化props的生命周期')
    return {
      age:16
    }
  },

数据绑定

{} 里面存放变量表达式
对象 不能直接绑定
数组 数组的每一项都会被拆分出来

指令

react中不存在指令需要我们自己去实现相同的效果

1. 列表渲染
   map
   数组在绑定的时候会被拆解开来 通常结合map实现对数据的处理
2. 条件渲染
   a. 三元表达式控制渲染
   b. || 或运算符控制渲染
   c. 函数的返回控制渲染
3. 属性绑定
   属性的值是变量

 <img src={变量或者表达式}>

注意类名要用className
4. 事件绑定 v-on:click
react事件和原生事件类似

 原生：  <div onclick=''></div>
  react ：<div onClick=''></div>

   onClick={(e)=>{
     事件处理代码
   }}  

2. 不带参数 默认参数是事件对象 ，里面调用函数千万别加()

   onClick={this.fun}

3. 带参数 通过bind实现 默认参数会放到(fun)最后方

     onClick={this.fun.bind(null,4,6)}