React（day1）

1、react推荐JSX写

由于JSX不能被浏览器直接识别，所以要引入babel，JSX是解决创建虚拟DOM繁琐。

  <script type="text/babel">
  <!----JSX创建虚拟DOM----->
    let VDOM=<h1>体验JSX</h1>
    <!----渲染虚拟DOM-->
    ReactDOM.render(VDOM,document.getElementById('test'))
  </script>

2、函数式组件

function MyComponent(){
	/*函数里边的this是undefind*/
	return <div>体验函数式组件</div>
	}
ReactDOM.render(<MyComponent/>,document.getElementById('test'))
    /*ReactDom.render(<MyComponent>)发生了react解析组件标签，找到了MyComponent组件，随后执行组件*/

3、类式组件

class MyComponent extends React.Component{
      render(){
        console.log(this,'MyComponent')
        /*
        类式组件必须继承React.Component,render必须有，
        render放在MyComponent的原型对象上给实例使用
        里面的this指向实例
        */
        return <div>类式组件</div>
      }
    }
    ReactDOM.render(<MyComponent/>,document.getElementById('test'))
    /*
      ReactDom.render(<MyComponent>)发生了react解析组件标签，找到了MyComponent组件，
      发现组件是类定义的，随后new了该类的实例对象，调用该实例原型上的render方法
      虚拟DOM转化真实DOM，随后渲染页面
      */

4、 组件三个属性

1、 State(state 是React组件自身的数据,具有“响应式”的特性)

例：点击改变天气

1、更改class中方法this指向

class MyComponent extends React.Component{
  constructor(props){
    super(props)
    this.state={isHot:true}
    /*将原型上的changeWeather赋值给this,并且更改changeWeather中this指向，如果没有这句changeWeather中this是unddefind*/
    /*为啥changeWeathwer中this指向不对，因为react在挂在dom节点的时候帮我们new了实例对象，constructor和render都是通过实例对象调用，只有changeWeather不是，所以z指向不对，react类中的方法还开了严格模式*/
    this.changeWeather=this.changeWeather.bind(this)
    console.log(this)
  }
  render(){
    let {isHot}=this.state
    return <div onClick={this.changeWeather}>今天天气{isHot?'热':"冷"}</div>
  }
  /*计划在changeWeather中改变isHot*/
  changeWeather(){//原型上的changeWeather方法
    /*JSX对象中的方法默认开启严格模式严格模式下this是undefind*/
    console.log(this)
  }
}
ReactDOM.render(<MyComponent/>,document.getElementById('test'))

2、通过setState改变state

class MyComponent extends React.Component{
  //执行1次
  constructor(props){
    super(props)
    this.state={isHot:true}
    /*将原型上的changeWeather放在实例上,并且更改changeWeather中this指向，如果没有这句changeWeather中this是undefind
    this.changeWeather=this.changeWeather.bind(this)
    /*console.log(this.changeWeather,'changeWeather')*/
  }
  /*执行1+n*/
  render(){
    let {isHot}=this.state
    return <div onClick={this.changeWeather}>今天天气{isHot?'热':"冷"}</div>
  }
  /*执行n次，n为点击次数*/
  changeWeather(){/*如果上边不改变this指向就是原型上的changeWeather方法，改变后直接调用自己的*/
    /*JSX对象中的方法默认开启严格模式严格模式下this是undefind*/
    /*console.log(this)*/
    /*状态必须经过setState改变，否则无效，并且是合并不是替换*/
    let isHot=this.state.isHot
    //this.state.isHot=!isHot /**是错的*/
    this.state.isHot=this.setState({isHot:!isHot})
  }
}
ReactDOM.render(<MyComponent/>,document.getElementById('test'))

3、简写

class MyComponent extends React.Component{
  state = { isHot:false }
  render(){
    let {isHot}=this.state
    return <div onClick={this.changeWeather}>今天天气{isHot?'热':"冷"}</div>
  }
  changeWeather=()=>{ /*这样写直接是在changeWeather实例上方法和属性,
    不能用function函数，应该是因为开了严格模式，箭头函数不绑定this，箭头函数this		是上下文*/
    //console.log(this,'changeWeather里的this')
    let isHot = this.state.isHot
    this.state.isHot=this.setState({isHot:!isHot})
  }
}
ReactDOM.render(<MyComponent/>,document.getElementById('test'))

2、props

展开运算符…可以赋值对象

class Student extends React.Component{
  render(){
    const {name,age,sex}=this.props /*接收传递过来的参数*/
    return (
      <ul>
        <li>年龄{age}</li>
        <li>名字{name}</li>
        <li>性别{sex}</li>
      </ul>)
  }
}
/*进行类型约束*/
Student.propTypes={
  name:PropTypes.string.isRequired //字符串必填
}
Student.defaultProps={
  sex:"不男不女" //默认值
}
ReactDOM.render(<Student name="" age={18} />,document.getElementById('test'))

简写形式

    class Student extends React.Component {
      static PropTypes  = { /*定义静态属性：静态属性即为类设置属性，
      而不是为生成的对象设置，下面是原理实现*/
        name: PropTypes.string.isRequired //字符串必填
      }
      static defaultProps = {
        sex: "不男不女" //字符串必填
      }
      render() {
        const { name, age, sex } = this.props /*接收传递过来的参数*/
        return (
          <ul>
            <li>年龄{age}</li>
            <li>名字{name}</li>
            <li>性别{sex}</li>
          </ul>)
      }
    }
    Student.propTypes = {
      name: PropTypes.string.isRequired //字符串必填
    }
    Student.defaultProps = {
      sex: "不男不女" //字符串必填
    }
    ReactDOM.render(<Student name="" age={18} />, document.getElementById('test'))

函数式组件没有refs和state但是有props

function Student(props) {
      let { name, age, sex } = props
      return (
        <ul>
          <li>年龄{age}</li>
          <li>名字{name}</li>
          <li>性别{sex}</li>
        </ul>)
    }
    Student.propTypes = {
      name: PropTypes.string.isRequired //字符串必填
    }
    Student.defaultProps = {
      sex: "不男不女" //字符串必填
    }
    ReactDOM.render(<Student name="yuru" age={18} />, document.getElementById('test'))