react语法从入门到项目实战系列（2)-组件基础

前言

时间过得太快 一晃就入行前端开发三年了，从入行至今做过各种框架的项目，其中主流的react很久没用了，最近刚好复习了一下顺便做成文章分享一下也方便自己日后回忆，有开发经验的前端看完这个系列的文章已经足够参与普通管理系统项目的编写了（包含了class写法的hooks写法）

适用人群： 没时间去看官方学习或者找视频进行系统学习，但又临时接手react项目需要快速上手的的小伙伴；或者会vue框架但想快速多学一门框架方便日后上手的小伙伴

注意： 该文章适合有开发经验的小伙伴观看，如果什么前端框架都不会看的很蒙的

正文

上一章主要讲react的JSX语法，这是使用这个框架最基础也是最重要的部分，会使用基本的JSX语法接下来就是学习组件基础了，毕竟代码都是组件化的，以下会对class和hooks两种组件写法都进行讲解

1、函数式组件写法 -- 目前主流写法

//以下创建一个Hello组件并且在标签中使用
function Hello(){
    return <div style={{color:'teal'}}>函数组件</div>
  }
  //渲染<Hello/>或者<Hello></Hello>
  
  function App() {
    return (
      <div className="App">
        <Hello/>
        <Hello></Hello>
      </div>
    );
  }
  
  export default App;

组件的基本约定说明

1.组件名称必须大写字母开头，内部通过这个判断中组件还是HTML标签

2.函数组件必须有返回值，如果不需要渲染则返回null

注意:老项目用类组件比较多,新项目用函数组件比较多

2、类组件用法 -- 老写法

//类组件的创建和渲染
//创建
import React from "react";     //引入，下行要使用
class Hello extends React.Component{
  render(){  //固定名称写法
    return <div style={{color:'red'}}>我是类组件</div>
  }
}
//渲染<Hello/>或者<Hello></Hello>

function App() {
  return (
    <div className="App">
      {/* 渲染类组件 */}
      <Hello/>
      <Hello></Hello>
    </div>
  );
}

export default App;

class写法要import React from "react"引入使用，组件约定规侧是一样的

3、组件的事件绑定

import React from "react";
//（1）函数组件----------------------------------------------------------------------
function Hello(){  
  const duEvent = () =>{     //定义一个用于被事件触发的函数
    return alert('函数组件的事件被触发了')
  }
  // onClick={duEvent}触发事件
  return <div style={{color:'teal'}} onClick={duEvent}>函数组件</div>
}

 //类组件（2）------------------------------------------------------------------
class HelloTwo extends React.Component{ 
  duEventTwo = () =>{     //标准写法，这样写this指向当前的组件实例对象
    return alert('类组件的事件被触发了')
  }
  render(){  //固定名称写法
    //留意第18行的onClick={this.duEventTwo}，如果是class组件，注意事件那里要加this
    return <div style={{color:'red'}} onClick={this.duEventTwo}>我是类组件</div>
  }
}


function App() {  // 父组件
  return (
    <div className="App">
      <Hello/>
      <Hello></Hello>
      <HelloTwo/>
      <HelloTwo></HelloTwo>
    </div>
  );
}

export default App;

上面（1）是函数组件写法，（2）是类组件的写法，注意：on+事件名称={事件处理程序}，注意采用驼峰命名，如onClick

4、获取事件对象

function Hello(){
    const duEvent = (e) =>{     
      e.preventDefault()       //阻止事件默认行为-------------------
      console.log('函数组件的事件被触发了',e);
    }
    // onClick={duEvent}触发事件
    return <div><a onClick={duEvent} href="http://baidui.com">跳转</a></div>
  }
  
  function App() {
    return (
      <div className="App">
        <Hello/>
        <Hello></Hello>
      </div>
    );
  }
  
  export default App;

直接在方便中使用e就能获取到基本的事件对象

5、事件绑定额外传递参数

function Hello(){
    const duEvent = (e,msg) =>{     
      // e.preventDefault()
      console.log(e);
      console.log('函数组件的事件被触发了',msg);
    }
    // 1.这个写法把事件对象e和自定义参数一起传过去
    return <div onClick={(e)=>duEvent(e,'我是传递的参数')}>点击传参</div>
    // 2.这个写法只传递自定义的额外参数
    // return <div onClick={()=>duEvent('我是传递的参数')}>点击传参</div>
  }
  
  function App() {
    return (
      <div className="App">
        <Hello/>
        <Hello></Hello>
      </div>
    );
  }
  
  export default App;
  

留意上面第8行和第10行两种写法，传参时是否需要获取e的写法有所不同

6、组件状态的定义使用

import React from "react";     
class HelloTwo extends React.Component{  
  //1.定义组件状态   注:state名称固定
  state = {  //这里定义组件的各种属性，全都是当前组件的状态
    name:'天天哥',
    age:'18',
    arr:[11,22,33],
    obj:{
        sum:'修改前'
    }
  }
  duEvent = () => {
    //3.修改state中的内容,注:不可以直接修改,要使用setState方法修改
    this.setState({
      name:'修改后的天天',
      // arr:['99修改后'],
      arr:this.state.arr.filter(item => item!=22),   //把内容不为22的项返回
      obj:{
        ...this.state.obj,   //先把老值取过来,再在下行进行覆盖
        sum:'修改后'
      }
    })
  }
  render(){  
    //2.使用状态
    return(
      <div>
        <h3>我是{this.state.name}，我今年{this.state.age}岁</h3> 
        <h3>看看数组:{this.state.arr[0]},{this.state.arr[1]},{this.state.arr[2]}</h3>
        <h3>看看对象:{this.state.obj.sum}</h3>
        <button onClick={this.duEvent}>点击修改</button>
      </div>
    ) 
  }
}

function App() {
  return (
    <div className="App">
      <HelloTwo/>
    </div>
  );
}
export default App;

注意 ：react hook出来之前，函数组件是没有自己的状态，所以我们统一通过类组件来讲解 步骤：初始化状态=>读取状态=>修改状态=>影响视图（按代码中的标号顺序1234执行）； 简单说就是使用state定义一些变量，然后如果要改变变量的值就使用this.setState去操作数据，在标签中this.state.name这样使用

7、了解this指向相关的问题

import React from "react";
class HelloText extends React.Component{
  //解决方案一:constructor里修改-----------------------------------------------------------------------------
  //如果用这种定法,就要用bind这样修正this指向
  //相当于初始化阶段强行修正this,永远指向当前组件的实例对象
  // constructor(){               
  //   super()
  //   this.duEvent = this.duEvent.bind(this)
  // }

  //下行这个写法获取到的this是undefined,-----尽量用 duEvent=(msg)=>{}写法
  duEvent(){
    console.log(this);
  }
  render(){
    return(
      <>
        {/* <button onClick={this.duEvent}>点击值</button> */}
        {/* 如下行为解决方案二:用()=>形式使其this永远指向父级函数,即render -----------------------------------------*/}
        <button onClick={()=>this.duEvent()}>点击值</button>
      </>
    )
  }
}
function App() {
  return (
    <div className="App">
      <HelloText/>
    </div>
  );
}
export default App;

修改this方法1可以在constructor里面用bind这样修正this指向参考第六行，方法2可以用用()=>形式使其this永远指向父级函数参考第20行，这也是日常开发用的比较多的方法

8、表单_受控组件

//受控组件：input框自己的状态被react控制
import React from "react";     
class HelloTwo extends React.Component{  
  //1.声明用来控制input value的react组件自己的状态
  state={
    message:'我是框里的内容'
  }

  changeInt = (e) =>{
    // 4.拿到输入橫最新的值，交给state中的message
    this.setState({
      message:e.target.value
    })
  }

  render(){  
    return(
      /* 2.给input框的value属性绑定react state */
      /* 3.给input框绑定一个change的事件，为了拿到当前输入框的数据 */
      <input type='text' value={this.state.message} onChange={this.changeInt}/>
    ) 
  }
}

function App() {
  return (
    <div className="App">
      <HelloTwo/>
    </div>
  );
}
export default App;

受控组件：顾名思义就是input框自己的状态被react控制，具体用法为：

1.声明用来控制input value的react组件自己的状态

2.给input框的value属性绑定react state

3.给input框绑定一个change的事件，为了拿到当前输入框的数据 拿到输入橫最新的值，交给state中的message

4.拿到输入橫最新的值，交给state中的message

9、非受控表单组件

import React,{createRef} from "react";     //1.导入createRef函数
class HelloTwo extends React.Component{  
  //2.使用createRef函数创建一个ref对象，存储到自定义变量中
  msgRef = createRef()
  duEvent=()=>{
    console.log(this.msgRef.current.value);
  }
  render(){  
    return(
      <>
      {/* 3.为input框添加ref属性 */}
      <input type='text' ref={this.msgRef}/>
      {/* 4.在按钮事件处理中，通过msgRef.current即可拿到对应的dom元素
       而msgRef.current.value拿到的是文本框的值-------current是固定写法*/}
      <button onClick={this.duEvent}>点击获取框的值</button>
      </>
    ) 
  }
}

function App() {
  return (
    <div className="App">
      <HelloTwo/>
    </div>
  );
}
export default App;

非受控表单组件：即手动操作DOM的方式获取文本框的值，具体操作流程为：

1.导入createRef函数

2.使用createRef函数创建一个ref对象，存储到自定义变量中

3.为input框添加ref属性

4.在按钮事件处理中，通过msgRef.current即可拿到对应的dom元素

小结

第一节是熟悉react框架页面的代码结构，这一节熟悉组件的基础，把这个地方理解后基本对类组件代码是能看懂了的，但对组件的组件通迅、生命周期和主流hooks写法的页面我们放在后面章节去讲解