React学习笔记:一1. JSX语法 1.1 JSX注释写法 1.2 JSX嵌入变量(在大括号中) 当变量是Numbe

以前的项目用的都是Vue，但是不能安于现状呀，react也要学习，这样才能卷起来啊🤣

1. JSX语法

1.1 JSX注释写法

// jsx中写注释需要用大括号包裹
render(){
   return (
         <div>
          {
            // 我是注释
          }
          <h2>当前计数:{this.state.counter}</h2>
          <button onClick={this.increment.bind(this)}>+1</button>
          <button onClick={this.decremanet.bind(this)}>-1</button>
         </div>
   )
  }

1.2 JSX嵌入变量(在大括号中)

当变量是Number、String、Arrary类型时，可以直接显示
当变量时null、undefined、Boolean类型时，内容为空
1. 如果希望可以显示null、undefined、Boolean，那么需要转成字符串
2. 例:toSting()方法，和空字符串拼接，Sting(变量)等方式

1.3 JSX绑定属性

//省略部分代码
//react动态绑定属性使用的是大括号 对比vue的v-bind
render(){
    const { imgUrl ,link , active} = this.state
   return (
     <div>
        {/* 绑定属性 */}
        <img src={getImg(imgUrl, 150)} alt=""/>
        <a href={link} target="__blank">百度一下</a>

        {/* 绑定class */}
        <div className="aa bb">你好啊</div>
        <div className={ 'aa bb ' + (active ? 'active' : '') }>动态绑定</div>
        <label htmlFor=""></label>

        {/* 绑定style */}
        <div style={{color:'red',fontSize:'50px'}}>Style样式</div>
     </div>
   )
  }

1.4 JSX绑定事件和this处理

动态绑定处理函数的this
使用箭头函数定义方法
直接传入一个箭头函数，在箭头函数中调用所需要执行的函数

class App extends React.Component{

      constructor() {
        super();
        this.state = { 
          message:'我是信息'
        }
        // 可以直接构造器里面将函数绑定this后重新赋值
        this.btnClick = this.btnClick.bind(this)
      }
      render(){
       return (
         <div>
          {/* 1.方案一: bind绑定this(显式绑定) */}
          <button onClick={this.btnClick}>按钮1</button>
          <button onClick={this.btnClick.bind(this)}>按钮2</button>

          {/* 2.方案二: 使用箭头函数定义方法 */}
          <button onClick={this.btnClick1}>按钮3</button>

          {/* 3.方案三(推荐): 直接传入一个箭头函数，在箭头函数中调用所需要执行的函数  */}
          <button onClick={()=>this.btnClick2(11)}>按钮4</button>
         </div>
       )
      }

      btnClick(age){
        console.log(this.state.message,age);
      }
      btnClick1 = (age)=>{
        console.log(this.state.message,age);
      }
      btnClick2(age){
        console.log(this.state.message,age);
      }
    }

1.5 React条件渲染

react没有跟vue一样的v-if判断是否渲染，但是react的判断更加灵活

class App extends React.Component{

      constructor() {
        super();
        this.state = { 
          isLogin:false,
          movies:['大话西游','海王','流浪地球']
        }
      }
      render(){
        const { isLogin } = this.state
        // if 判断语句
        let welcom = null
        if(isLogin){
          welcom = '欢迎回来~'
        }else{
          welcom = '请先登录~'
        }

        const isShow =  isLogin ? 'block':'none'
       return (
         <div>
            <h2>{welcom}</h2>
            {/* 逻辑与&&  v-if效果 */}
            <h3>{isLogin && '欢迎你。。。'}</h3>
            {isLogin && <h3>欢迎你...</h3>}
            {/* v-show效果 */}
            <h2 style={{display: isLogin ? 'block':'none'}}>你好啊 v-show效果</h2>
            <h2 style={{display: isShow}}>你好啊 v-show效果</h2>
            {/* 三元运算符 */}
            <button onClick={()=>this.btnClick()}>{isLogin ? '退出':'登录'}</button>
            <h2>电影列表</h2>
            {/* 循环列表 */}
            <ul>
                {
                  this.state.movies.filter(item=>item.length > 3)
																		.map(item=><li>{item}</li>)
                }
            </ul>
         </div>
       )
      }
      btnClick(){
        this.setState({
          isLogin:!this.state.isLogin
        })
      }
    }

2. JSX的本质

2.1 JSX

实际上 jsx仅仅只是React.createElement(component.props,...children)函数的语法糖
- 所有jsx最终都会被转换成React.createElement的函数调用
- createElement需要传递三个参数
  - 参数一:type
    - 当前createElement的类型
    - 如果是标签元素，那么就使用字符串表示"div"
    - 如果是组件元素，那么就直接使用组件的名称
  - 参数二:config
    - 所有jsx中的属性都在config中以对象的属性和值得形式存储
  - 参数三:children
    - 存放在标签中的内容，以children数组的方式进行存储

3.2 创建虚拟Dom的过程

通过React.createElement最终创建出来一个ReactElement对象
这个ReactElement对象是什么做用呢？React为什么要创建它呢
- React利用ReactElement对象组成了一个JavaScript的对象树
- JavaScript的对象树就是大名鼎鼎的虚拟DOM( Virtual DOM )
JSX —> createElement函数 —> ReactElement(对象树) —> ReactDom.render —> 真实DOM