React类式组件基础内容补充

受控组件与非受控组件

受控组件

• 什么是受控组件：
  类似于vue的双向数据绑定，数据和视图之间可以相互影响
• 什么时候使用受控组件：
  需要对组件的value值进行修改时，使用受控组件。比如：页面中有一个按钮，每点击一次按钮受控组件的值加1

非受控组件

• 什么是非受控组件：
  类似于单项数据流，只可以数据改变视图
• 什么时候使用受控组件：
  任何时候都不需要改变组件的value值，这时候可以使用非受控组件。

PureComponent

• 什么是PureComponent
  • React.PureComponent 与 React.Component 几乎完全相同，但 React.PureComponent 通过props和state的浅对比来实现 shouldComponentUpate()。
  • 在PureComponent中，如果包含比较复杂的数据结构，可能会因深层的数据不一致而产生错误的否定判断，导致界面得不到更新。

ref

• 引入

  import React,{PureComponent, createRef} from 'react';
  

• 创建

  myNewRef = createRef();
  

• 挂载

    render(){
      return (
        <div ref={this.myNewRef} ... >
          ...
        </div>
      )
    }
  

• 执行

    componentDidMount(){
      new BScroll(this.myNewRef.current)
    }
  

children

使用过vue的话一定知道slot插槽，作用就是站位，在React中可以使用children来代替

import React,{PureComponent} from 'react';

// 父级
class App extends PureComponent {
	state={
    	show : false,
    	man  : false
  	}
	render(){
		let {show,man} = this.state;
		return (<div>
	        {
	          show?(<MyChild>
	            <h1>准备国庆快乐</h1>
	            <p>我想回学校</p>
	          </MyChild>):null
	        }
	
	        {
	          man?(<MyChild>
	            <h1>邓州窝子面</h1>
	            <p>味道好极了</p>
	          </MyChild>):null
	        }
	
	        <button onClick={()=>{
	          this.setState({show:true})
	        }}>点击show</button>
	        
	        <button onClick={()=>{
	          this.setState({man:true})
	        }}>点击man</button>
	      </div>)
	  }
	}

export default App;

// 子级
class MyChild extends PureComponent{
  render(){
	return <div> {this.props.children} </div>
  }
}

dangerouslySetInnerHTML

只能够 / 必须去 接受的是后端处理过的安全数据！！！

import React,{PureComponent} from 'react';
let message = '<h1>邓州窝子面</h1><p>味道好极了</p>';

class App extends PureComponent {
 render(){
    return (<div dangerouslySetInnerHTML={{__html:message}}></div>)
  }
}

export default App;

key

• 重要的key值应该是一个稳定的值，而不应该以索引当key值，推荐的做法是用唯一id标识
• 索引当key值通常只在不涉及增删等改变索引序列的情况下使用