react基础

react基础

基础语法

• 引入文件

• 相当于vue.js 提供的是React对象

• • 提供了ReactDOM 对象

  • 网页 B(browser)/S(server) webapp dom bom

    react基本语法 + react-dom 可以写网页

  • app C(client)/s(Server) 手机硬件以及ui

    react基本语法 +react-native 可以写app

• • 帮助浏览器解析jsx语法糖

• 创建组件

  • 组件是虚拟dom

  • 组件名开头必须大写

    let Component = React.createClass({
      render() {
        // render 函数内部 返回jsx 其中()不是必须的只是表示这里的是jsx
        return (
          
     你好世界
        )   
      }
    })
    

• 挂载组件

  • 将虚拟dom通过 ReactDOM.render(组件标签，要挂载的元素)

ReactDOM.render(,document.getElementById('app'))

jsx 语法糖

• javascript xhtml 严格模式下的html
  • 必须只有一个根元素
  • 标签必须闭合

数据承载

• vue 中一个组件的数据2中 一种 组件内部的data 一种是来自组件外部的props

• react数据承载也有两个

  • state
    • state 类似于vue中的data 组件自己的数据 可以随便的修改
    • getInitailState 生命周期初始化
  • props
    • 和vue一样来自组件外.只读
    • 用getDefaultProps 进行初始化

• 外部传递和组件内部初始化同时存在以外部传递优先

  let Hehe = React.createClass({
      //根据挂载的数据不同这里决定用getInitialState或getDefaultProps
    getInitialState(){
      console.log('初始state的生命周期')
      return {
        name:'韩梅梅'
      }
    }
  

数据绑定

• react 数据绑定{变量或者表达式} 和vue中的 {{ }} 一样一样的
• jsx 不能直接绑定对象
• jsx 绑定数组 会将数组的每一项拆分出来 渲染到页面上
• boolean null undefined 不会再页面上直接渲染 但是可以使用3元表达式
• 其他的基本类型该怎么渲染就怎么渲染

列表渲染

• react中的条件渲染依赖于 绑定数组会将数组的每一项拆分出来
  • 利用map遍历出数组每一项

let Component = React.createClass({
  getInitialState(){
    return{
      list:['咒怨','午夜凶铃','红色高跟鞋','死亡来电','阴阳瞳']
    }
  },
  render() {
    return (
      

        {this.state.list.map((item,index)=>{
          return(
            
{item}
          )
        })}
      
    )
    
  }
})

ReactDOM.render(,document.getElementById('app'))

• 也可封装出一个函数.

   renderList(){
      // 函数的返回结果
     return this.state.list.map((item,index)=>{ 
      // map 每一项的返回
       return(
         
  {item}
       )
     })
    },
    render() {
      return (
        
  
          {this.renderList()}
        
      )
      
    }
  

条件渲染

1. 通过三元表达式控制渲染不渲染

2. 表达式1||表达式2 运算符

3. 函数实现

   • 中心思想就是在数据中给一个状态,通过状态的改变来控制是否渲染

     let Component = React.createClass({
       getInitialState(){
         return{
           show:false
         }
       },
       renderDiv(){
         let result = null 
         if(this.state.show){
           result  =  (
     )
         }
         return result 
       },
       render() {
         console.log(this)
         // 解构赋值 取出数据
         let {show} =  this.state 
         return (
           
     
            {/*{show?"显示":'隐藏'}*/} 
            {/*{show?
     :''}*/}
            {/*{!show||
     }*/}
            {this.renderDiv()}
           
         )
         
       }
     })
     

属性绑定

3. 属性绑定

   希望属性的值是变量

   

   注意类名要用className

事件绑定

• react事件和原生事件类似只需要把事件名写成小驼峰就ok

  原生

  react

• onClick={(e)=>{

  事件处理代码

  }}

• 不带参数 默认参数是事件对象 千万别加()

  onClick={this.fun//函数}

• 带参数 通过bind实现 默认参数会放到最后方

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

响应式

• 通过setState触发页面的修改
• this.setState({要修改的数据:修改的内容},回调)
• setState 是一个异步方法
• 参数1是要修改的数据
• 参数2是修改成功之后的回调

组件嵌套

• 组件的嵌套关系随意 谁在外部谁是爸爸

插槽

• <组件>内部内容

• 使用组件内部的内容默认不会被渲染

• 可以使用this.props.children预留一块空间来渲染可能要用到的内容

  let Component = React.createClass({
    render(){
      return(
        
   
          这是组件1
          
          //这里默认不会被渲染.但可以在组件内容预留下一块空间来渲染
            政治老师:底层基础，·决定高层建筑
          
        
      )
    }
  })
  //创建组件二
  let Son = React.createClass({
    render(){
      console.log(this)
      return (
        
  
         //预留一块空间来渲染可能添加的内容
          
  {this.props.children}
        
      )
    }
  })
  

ref

• 可以绑定dom 也可以绑定组件

  通过组件对象下的 refs进行获取

  let Son = React.createClass({
    render(){
      return (
        
  
          这里是组件二
          
  体育老师：受伤了就别逞强了
          {
            console.log(this.refs.hehe)
          }}>点击
        
      )
    }
  })
  

• 绑定之后可以获取到绑定组件的一切方法 可以实现在父组件中调用子组件的方法

  let Component = React.createClass({
    render(){
      return(
        
   
          这是组件1
          {
            console.log(this)
            this.refs.son.sayHello()
          }}>点击
          
  
        //绑定子组件
          
        
      )
    }
  })
  

组件通信

• 需要修改的数据和修改数据的方法要放到一起.

• 父子通信 props refs

  子父通信 props

  亲兄弟通信 状态提升

  远亲通信 全局状态管理 redux

  let Father = React.createClass({
    getInitialState(){
      return{
        hair:'五颜六色 长发披肩'
      }
    },
    render(){
      return(
        
  
        
  这里是父组件
   
        {
          this.setState({hair:'小平头'})
        }}>改过自新回头是岸
        
  
        {/*父组件通过自定义属性 将自己的数据传奇给子组件*/}
        
        
      )
    }
  })
  
  let Son = React.createClass({
    render(){
      return(
        
  
        
  子组件
   
          //子组件通过props属性来接受
         头发:{this.props.hair}
        
      )
    }
  })
  

• ref

  let Father = React.createClass({
    render(){
      return(
        
  
        
  这里是父组件
   
         {
          //  父组件通过refs强行调用子组件的理发方法
           this.refs.son.change()
         }}>强制措施
         
        
      )
    }
  })
  let Son = React.createClass({
    getInitialState(){
      return{
        hair:'五颜六色 长发披肩'
      }
    },
      //数据和处理数据的方法都在这里,同个ref把子组件的数据和方法都传给父组件.让父组件来调用.
    change(){
      this.setState({hair:'小平头'})
    },
    render(){
      return(
        
  
        
  子组件
   
         {this.state.hair}
        
      )
    }
  })
  

• 子父通信

  let Father = React.createClass({
    getInitialState(){
      return{
        name:"韩梅梅"
      }
    },
    changeName(name){
      this.setState({name:name})
    },
    render(){
      return(
        
  
        
  这里是父组件
   
        {this.state.name}
        
        
  
        {/*通过props 传递方法*/}
        
        
      )
    }
  })
  
  let Son = React.createClass({
    render(){
      return(
        
  
        
  子组件
   
        {
          console.log(this)
          // 调用父组件的方法
          this.props.fafun('李雷雷')
        }}>子组件的触发按钮
        
      )
    }
  })