React（一）

---

JSX

• JSX实际上是一个javascript对象

//DOM元素结构
<div class = "hhh" id="yyy">
<button>点击</button>
</div>
//Javascript对象
{
tag:'div',
attrs:{className:'hhh',id:'yyy'}
children:[
   {
    tag:'button',
     children:[点击]
    }
  ]
}

  - HTML中的DOM结构可以通过Javasvript对象进行描述，React.js将javascript的语法进行扩展，使得能够在javascript中直接编写类似HTML标签结构的语法即JSX，编译之后会将JSX结构转换为Javascript的对象结构
  - Babel编译+React.js构造将JSX转换为Javascript对象
  - ReactDOM负责将javascript对象变为DOM元素并渲染到页面中
 

---

组件的render方法

• 组件类一般都需要继承component，并且实现render方法，返回JSX元素

class Hye extends Component{
  render(){
    return(
      <h1>我的第一个组件</h1> 
    )
  }
}

  - 返回的JSX元素应使用最外层将全部包裹起来，不能返回多个并列的JSX元素
 

• 组件可以进行嵌套，组合

class Hyq extends Component {
  render () {
    return (
      <h1>这是我</h1>
    )
  }
}

class Home extends Component {
  render () {
    return (
      <div>
        <Hyq />
      </div>
    )
  }
}

  - 自定义组件应以大写开头

• 绑定事件

class Ti extends Component{
handleClick(e){
    console.log(e.target+": 阿，点到我了");
  }

render(){
  return(
    <buttom onClick = {this.handleClick}>点击</button>
  //onClick = {this.handleClick.bind(this)}

    )
  }
}

  - react中封装了不同类型的是事件（on*），事件的属性采用驼峰式命名，这些事件监听只能用在HTML标签上，不能用在组件标签中
  - react中event对象是内部构建的，不需要考虑兼容性
  - react中调用传入的方法时，不是通过对象发放的方式调用而是直接调用函数，在事件监听中无法通过this获取实例，应通过bind进行绑定
 

---

state & setState

• 进行状态的存储

class Hyy extends Component{
  constructor(){
    super();
    this,state = {isClick:false}
  }
  hadleClick(){
    this,setState(
      isClick:! this.state.isClick
    );
  }
  render(){
    return(
      <button onClick = {this,handleClick.bind(this)}>
          {this,state.isClick? '未点击':'点击过'}
      </button>
    )
  }
}

  - 调用setState后，react.js进行更新state重新调用render重新渲染页面
  - setState接受一个对象或者函数作为参数
  - 进行多次的setState实际上只会渲染一次
  

---

配置组件 props

• 为组件添加配置属性

class Content extends Component{
  construct(){
    super()
    this.state = {isClick:false}
  }
  
  hadleClick(){
     this.setState(
      isClick:!this.state.isClick
    );
  }

  render(){
    var clickText = this.props.message;
    return (
      <button onClick = {this.hadleClick.bind(this)}>
      {this.state.isClick?clickText:"点击出现"}
      </button>
    )
  }
}

class Title extends Component{
  render(){
    return(
     <div>
      <Content message = 'I ‘am fine ^ _ ^' />
    </div>
    )
  }
} 

  - 在组件内部可以设置默认配置defaultProps

static defaultProps = {……}

  - props的参数传入内部之后不能进行修改，但是可以通过父组件主动重新渲染传入新的props

---

  

state & props

• state是让组件自己控制自己的状态；props是外部对组件状态进行控制
• 有state的成为有状态组件反之为无状态组件

 
参考资料：http://huziketang.mangojuice.top/books/react/lesson1