49.React学习 —— 组件(props)、状态(state)、this指向、ref

React的组件

组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。

组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。

一个React应用就是由一个个的组件组成的

创建组件的两种方式

函数组件

不能定义状态

 
function Header(){
   
   
    return <div>我是标题组件</div>
}
// 函数名就是组件名
ReactDom.render(<Header></Header>, document.getElementById('root'))
                
// 注意:
1. 组件名首字母必须大写. 因为react以此来区分组件和react元素
2. 必须有返回值.返回的内容就是组件呈现的结构, 如果返回值为 null，表示不渲染任何内容
3. 组件内部如果有多个标签,必须使用一个根标签包裹.只能有一个根标签
        

类组件

可以定义状态(状态: 组件内部私有的数据)

class Header extends React.Component{
   
   
    render(){
   
   
    	return <div>我是标题组件</div>
    }
}
// 如果组件没有子节点,也可以写成自闭和标签
ReactDom.render(<Header />, document.getElementById('root'))

//注意: 
1. 组件名首字母必须大写.
2. 类组件中必须要声明一个render函数
3. render函数中必须有返回值.
4. 类组件应该继承 React.Component 父类，从而可以使用父类中提供的方法或属性 
5. 组件内部如果有多个标签,必须使用一个根标签包裹.只能有一个根标签

组件的状态 state

函数组件又叫做无状态组件，类组件又叫做有状态组件

状态（state）即数据

函数组件没有state,一般只负责渲染静态结构

类组件有自己的状态，负责更新 UI，让页面“动” 起来

state的基本使用

• 状态（state）即数据，是组件内部的私有数据，只能在组件内部使用

• state 的值是对象，表示一个组件中可以有多个数据

• 获取状态：this.state

  class Hello extends React.Component {
       
          
      constructor() {
       
            
          super()        
          this.state = {
       
        count: 0 }  // 初始化state   
      }   
       // 简化语法 
      // state= { count: 0 } 
      
      render() {
       
            
          return ( 
        		<div>{
       
       this.state.count}</div>     
          )   
      } 
  } 
  

操作state

语法：this.setState({ 要修改的数据 })

注意：不要直接修改 state 中的值，应该使用组件实例的setState方法,修改state的值

setState() 作用：

1. 修改 state

2. 更新UI

   class Hello extends React.Component {
        
        
       constructor() {
        
        
           super() 
           this.state = {
        
         count: 0, num: 100 }// 初始化state
       }
   
       render() {
        
        
           return (
           		<div onClick={
        
        () => {
        
         this.setState({
        
        count: this.state.count + 1})}}>
           			{
        
        this.state.count}
           		</div> 
           	)
   	}
   }
   

setState的注意点

• 连续调用合并问题

  handle = () => {
       
       
      this.setState({
       
       
          count: this.state.count + 1
      })
      this.setState({
       
       
          count: this.state.count + 2
      })
      this