react基础

基础语法

引入文件
- <script src="../base/react.min.js"></script>
相当于vue.js 提供的是React对象
<script src="../base/react-dom.min.js"></script>
- 提供了ReactDOM 对象
- 网页 B(browser)/S(server) webapp dom bom
  
  react基本语法 + react-dom 可以写网页
- app C(client)/s(Server) 手机硬件以及ui
  
  react基本语法 +react-native 可以写app
<script src="../base/browser.min.js"></script>
- 帮助浏览器解析jsx语法糖

创建组件

组件是虚拟dom

组件名开头必须大写

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

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

ReactDOM.render(<Component/>,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 (
      <ul>
        {this.state.list.map((item,index)=>{
          return(
            <li>{item}</li>
          )
        })}
      </ul>
    )
    
  }
})

ReactDOM.render(<Component/>,document.getElementById('app'))

也可封装出一个函数.

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

条件渲染

通过三元表达式控制渲染不渲染
表达式1||表达式2 运算符

函数实现

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

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

属性绑定

属性绑定

希望属性的值是变量

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

注意类名要用className

事件绑定

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

原生 <div onclick=''></div>

react <div onClick=''></div>
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(
      <div className='test1'> 
        这是组件1
        <Son>
        //这里默认不会被渲染.但可以在组件内容预留下一块空间来渲染
          政治老师:底层基础，·决定高层建筑
        </Son>
      </div>
    )
  }
})
//创建组件二
let Son = React.createClass({
  render(){
    console.log(this)
    return (
      <div className='test2'>
       //预留一块空间来渲染可能添加的内容
        <h1>{this.props.children}</h1>
      </div>
    )
  }
})

ref

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

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

let Son = React.createClass({
  render(){
    return (
      <div className='test2'>
        这里是组件二
        <h1 ref='hehe'>体育老师：受伤了就别逞强了</h1>
        <button onClick={()=>{
          console.log(this.refs.hehe)
        }}>点击</button>
      </div>
    )
  }
})

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

let Component = React.createClass({
  render(){
    return(
      <div className='test1'> 
        这是组件1
        <button onClick={()=>{
          console.log(this)
          this.refs.son.sayHello()
        }}>点击</button>
        <hr/>
      //绑定子组件
        <Son ref='son'></Son>
      </div>
    )
  }
})

组件通信

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

父子通信 props refs

子父通信 props

亲兄弟通信状态提升

远亲通信全局状态管理 redux

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

let Son = React.createClass({
  render(){
    return(
      <div className='son'>
      <h3>子组件</h3> 
        //子组件通过props属性来接受
       头发:{this.props.hair}
      </div>
    )
  }
})

ref

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

子父通信

let Father = React.createClass({
  getInitialState(){
    return{
      name:"韩梅梅"
    }
  },
  changeName(name){
    this.setState({name:name})
  },
  render(){
    return(
      <div className='father'>
      <h3>这里是父组件</h3> 
      {this.state.name}
      
      <hr/>
      {/*通过props 传递方法*/}
      <Son fafun={this.changeName}></Son>
      </div>
    )
  }
})

let Son = React.createClass({
  render(){
    return(
      <div className='son'>
      <h3>子组件</h3> 
      <button onClick={()=>{
        console.log(this)
        // 调用父组件的方法
        this.props.fafun('李雷雷')
      }}>子组件的触发按钮</button>
      </div>
    )
  }
})

react基础

react基础

基础语法

jsx 语法糖

数据承载

数据绑定

列表渲染

条件渲染

属性绑定

事件绑定

响应式

组件嵌套

插槽

ref

组件通信

推荐阅读更多精彩内容