React（二）

React（二）

ref

函数式组件内没有 ref 属性，因为他们没有实例

何时使用

1. 管理焦点、文本选择或媒体播放
2. 触发强制动画
3. 集成第三方 DOM 库

给dom或者组件进行标记

ref字符串方式

react的严格模式下不建议使用

我们不建议使用它，因为 string 类型的 refs 存在 一些问题。它已过时并可能会在未来的版本被移除

class App extends React.Component{
    // 等到页面中的元素挂载完毕的时候，才可以获取到标签
    componentDidMount(){
      this.refs.input.focus()
    }
    render () {
      return(
        // 在严格模式下会爆警告
        
          
        
      )
    }
  }

回调函数的写法

 class App extends React.Component{
      componentDidMount(){
        this.input.focus()
      }
      render () {
        return(
          
            this.input=el}/>
          
        )
      }
    }

React.createRef的形式

 class App extends React.Component{
      constructor(props){
        // 调用父类的构造函数
        super()
        // 创建ref标记
        this.input=React.createRef()
      }
      componentDidMount(){
        this.input.current.focus()        
      }
      render(){
        return(
          

              
          
        )
      }
    }

---

组件的数据承载(props/state)

props 属性一般是从外部传入的，组件内部不能对其进行修改

state 状态是根据组件自身定义的，可以自行更改

对于state状态，不能直接进行更改，因为直接更改不会进行视图的同步渲染

需要通过this.setState

this.setState({
    key:新的value值
  }[,callback])

setState更改状态，是异步的。所以后续获取不到组件更新后的最新状态。
如果想要获取组件最新的状态，需要再setState的callback回调函数中获取即可

连续执行多次其实内部进行了对象的合并操作，后续的setState会覆盖之前的setState

可以采取以下写法解决

this.setState((prevState)=>{
  return {
  key:新的value值  
  }
},[,callback])

add=()=>{
  this.setState((preState)=>{
    return{
      count:preState.count+1
    }
  })
  this.setState((preState)=>{
    return{
      count:preState.count+1
    }
  })
}

---

事件函数的this指向问题

默认情况下，事件函数可以写成箭头函数的形式，this 就会指向组件实例

handleClick = () =>{
	console.log(this)	//指向组件实例
}

如果不采用箭头函数，而直接写普通函数，this 会指向 undefined

handleClick(){
  console.log(this)	//undefined
}

解决方式：通过 bind 方法改变this的指向

constuctor(){
  super()
  this.handleClick = this.handleClick.bind(this)
}

---

受控与非受控组件

表单元素的值来自 state 就是受控组件，否则就是非受控组件

受控组件：在React组件中，将可变状态保存在 state 属性中，并且只能通过 this.setState()方法来跟新； React 的 state 为唯一数据源，用来渲染表单的 React 组件，还控制着用户输入过程中的表单发生的操作

非受控组件：不需要写事件处理函数，有DOM自身进行维护，一般通过 ref 进行DOM的绑定

受控组件

class App extends React.Component{
  constructor(){
    super()
    this.state={
      value: '1111111'
    }
    this.handleChange=this.handleChange.bind(this)
  }
  handleChange(e){
    this.setState({
      value: e.target.value
    })
  }
  render(){
    return(
      

        
        
{this.state.value}
      
    )
  }
}

如果触发的事件想传递参数，需要借助 bind

handleChange(p,q,e){	//最后的参数是event
  console.log(p,q,e);	
  this.setState({
    value: e.target.value
  })
}

onChange={this.handleChange.bind(this,11,22)

非受控组件

class App extends React.Component{
  constructor(){
    super()
    this.handleSubmit=this.handleSubmit.bind(this)
  }
  handleSubmit(e){
    console.log(this.input.value);
    e.preventDefault();
  }
  render(){
    return(
      

        this.input=el}/>
        
      
    )
  }
}