React渲染注意事项

柔光的暖阳◎ 2022-09-04 11:55 149阅读 0赞

## React渲染注意事项 ##

> 首先React有两种渲染方式一种是通过函数方法的return返回出去，一种是通过类的render渲染组件

//函数式渲染 常用于静态页面渲染
    import React from 'react' 
    export default function asign() { 
      return (
        <div>
          
        </div>
      )
    }
    
    //类继承react渲染 常用动态渲染，因为在这里面可以保存状态
    import React, {  Component } from 'react'
    export default class asign extends Component { 
      render() { 
        return (
          <div>
            
          </div>
        )
      }
    }

> 接下来主要讲类渲染，因为比较常用

#### 类渲染的基础用法 ####

import React, {  Component } from 'react'
    export default class asign extends Component { 
      constructor() { 
        super()
        // 创建ref 这里ref相当于一个自定义属性 用在表单中可以让另一个组件获取到表单的内容 实现同步渲染React.createRef()创建自定义属性
        this.txtRef = React.createRef()
        this.state = { 
          count: 0,
          txt: ''
        }
      }
     
      a = () => { 
        this.setState({ 
          count: this.state.count + 3
        })
      }
      change = e => { 
        console.log(this.state.txt);
        this.setState({ 
          txt: e.target.value
        })
      }
      txtchange = () => { 
        console.log('文本框的值',this.txtRef.current.value);
      }
      render() { 
        return (
          <div>计数器：{ this.state.count}
            <button onClick={ this.a}>按钮</button>
            <input type="text" value={ this.state.txt} onChange={ this.change} />
            <input type="text" ref={ this.txtRef}  />
            <button onClick={ this.txtchange}>获取文本框值</button>
          </div>
        )
      }
    }

> 简单说一下上面代码包含的几个点 首先内容渲染使用`{}`,数据都写在state 中 以键值对的形式表现，相当于vue的data
> 
>  *  修改数据必须用setState
>  *  要考虑`this`的指向 一般我们习惯用创建类的实例对象 的方式+箭头函数的方式来写方法 `eg:funName=()=>{}`，其他还有两种方式自行百度这里就不一一解读了
>  *  `ref`里面有个属性current 一般我们用`e.target.current.value`获取对应的ref的内容
>  *  条件渲染一般使用三目运算例如
> 
>     content=()=>{ 
>     	if(条件语句){ 
>     		return (<div/>)
>     	}
>     	return (<p/>)
>     }

> 自行去改写成三目运算符语句，这里就不过多描述了

*  最后在渲染组件中使用`{this.content()}`,重点注意这里一定要加括号代表执行函数，一般在事件触发中我们不加括号 因为在那是事件触发函数，而在这里我们并没有事件 ，所以是需要自己立即执行的