react基础语法

• 函数组件

• class类组件

区别：

class类组件负责复杂的业务逻辑处理

函数组件负责UI界面渲染的

函数组件的书写

//简单组件创建
function App() {
  // UI模板
  return (
    <div>
      <button>按钮</button>
    </div>
  );
}
//文件暴漏
export default App;

用法：

//引入的是组件
import App from '@/views/index';

class类组件的写法

//1.引入react框架中的组件
import React from 'react'
//class集成React  Componet 之后 默认存在一个render函数
class  Home extends React.Component {
    //构造函数可以默认不写
    //构造函数写了  必须super super()  相当执行父类的构造
    constructor(){
        super();
    }
    render(){
        //在class类组件中this指向当前组件
        console.log(this);
        return (
            <div>
                <button>按钮</button>
            </div>
        )
    }
}

export default Home;

函数组件和class类组件的this指向问题？

• class类组件中的this指向当前组件

• 函数组件中的this指向undefined

开发中建议使用函数组件，主要原因是在react16.8版本之前是使用class组件写业务逻辑的，在16.8版本之后更新了一组hooksAPI ，函数组件使用hooks api 可以达到class类组件的功能。所以项目中推荐函数组件。

react中定义状态值

---

class组件：

快捷生成类组件安装vscode插件

快捷键

imrc   cccs

class Home extends Component {
  //组件传的值在props上
  constructor(props) {
    //组件传值传递到父组件component
    //component组件的构造中this.props=props;
    super(props);
    this.state = {};
  }
  render() {
    return <div></div>;
  }
}

备注：constructor 中的props 使用当前组件接收props传值，看到把props传递给父组件。

可以在当前的类组件中使用this.props获取组件传值。

 this.state={

  }
  //声明clas组件的state数据源   key:value

class组件中的状态如何到模板中使用

---

组件的模板中绑定数据

  render() {
    console.log(this.state);
    return <div>{this.state.msg}</div>;
  }
  //模板中绑定代码是{}

模板中绑定数据推荐使用

 render() {
    //获取state进行解构
    let { msg } = this.state;
    return <div>{msg}</div>;
  }

定义的state
 this.state = {
      msg: "hello world！",
      name: "btn",
      cName: "link",
      style: {
        width: 100,//可以不带单位  默认px  
        height: 30,
      },
      height:30
    };

render() {
    //获取state进行解构
    let { msg, name, cName, style,height} = this.state;
    return (
      <div>
        {/* 直接绑数据 */}
        <p>{msg}</p>
        {/* 绑定元素属性 */}
        <button name={name}>按钮</button>
        {/* 绑定元素的class属性 */}
        {/* ，class类名称直接解析 */}
        <button className={cName}>按钮</button>
        {/* 动态类+静态类切换 */}
        <button className={[true ? "link bg" : "bg"]}>按钮</button>
        <button className={true ? "bg link" : ""}>按钮</button>
        {/* style属性绑定 */}
        <button style={style}>按钮style</button>
        <button style={{width:true?'30px':'50px',height:height}}>按钮style</button>
      </div>
    );
  }
  //注意 class类名称关键字  官方提示将元素的class属性换成className

class组件中使用json数据格式

需要注意不能直接绑定整个集合但是 可以直接绑数组。

//定义的数据格式
 stuList: [
        {
          name: "小花",
          sex: "男",
          tel: 110,
        },
        {
          name: "小花1",
          sex: "男",
          tel: 110,
        },
        {
          name: "小花2",
          sex: "男",
          tel: 110,
        },
      ],
//UI上使用map方法进行映射
                 <table>
            <tbody>
              {stuList.map((item, index) => {
                return (
                  <tr key={index}>
                    <td>{item.name}</td>
                    <td>{item.sex}</td>
                    <td>{item.tel}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>

数据中如果存在嵌套集合

             <table>
            <tbody>
              {stuList.map((item, index) => {
                return (
                  <tr key={index}>
                    <td>{item.name}</td>
                    <td>{item.sex}</td>
                    <td>{item.tel}</td>
                    <td>
                      {item.hobby.map((ho, hindex) => {
                        return <span key={hindex}>{ho}</span>;
                      })}
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>

如果return返回模板标签返回 是多标签

浏览器端会直接报错

处理方案

    需要先引入react
    import React, { Component } from "react";
  {item.hobby.map((ho, hindex) => {
                        return (
                        //使用的是React.Fragment  内置组件
                          <React.Fragment key={hindex}>
                            <span key={hindex}>{ho}</span>
                            <span key={hindex}>{ho}</span>
                          </React.Fragment>
                        );
                      })}

如果项目中出现key值重复警告

<tr key={`t-${index}`}>  //前面补个前缀 作为区分

出现这种错误是在虚拟DOM同级比对key时出现了相同的key，可以添加前缀区分。

条件判断json集合根据不同条件反模板

{stuList.map((item, index) => {
                //条件判断
                if (item.age <=10) {
                  return (
                    <tr key={index}>
                      <td>{item.name}</td>
                      <td>{item.sex}</td>
                      <td>{item.tel}</td>
                      <td>
                        {item.hobby.map((ho, hindex) => {
                          return (
                            <React.Fragment key={hindex}>
                              <span>{ho}</span>
                              <span>{ho}</span>
                            </React.Fragment>
                          );
                        })}
                      </td>
                    </tr>
                  );
                }
                else{
                   //return  null  阻止模板渲染
                   return null;
                }函数组件
class类组件
区别：

class类组件负责复杂的业务逻辑处理

函数组件负责UI界面渲染的

函数组件的书写
//简单组件创建
function App() {
  // UI模板
  return (
    <div>
      <button>按钮</button>
    </div>
  );
}
//文件暴漏
export default App;
用法：

//引入的是组件
import App from '@/views/index';
class类组件的写法
//1.引入react框架中的组件
import React from 'react'
//class集成React  Componet 之后 默认存在一个render函数
class  Home extends React.Component {
    //构造函数可以默认不写
    //构造函数写了  必须super super()  相当执行父类的构造
    constructor(){
        super();
    }
    render(){
        //在class类组件中this指向当前组件
        console.log(this);
        return (
            <div>
                <button>按钮</button>
            </div>
        )
    }
}
export default Home;
函数组件和class类组件的this指向问题？

class类组件中的this指向当前组件
函数组件中的this指向undefined
开发中建议使用函数组件，主要原因是在react16.8版本之前是使用class组件写业务逻辑的，在16.8版本之后更新了一组hooksAPI ，函数组件使用hooks api 可以达到class类组件的功能。所以项目中推荐函数组件。

react中定义状态值
class组件：

快捷生成类组件安装vscode插件

image-20220728160137485

快捷键

imrc   cccs
class Home extends Component {
  //组件传的值在props上
  constructor(props) {
    //组件传值传递到父组件component
    //component组件的构造中this.props=props;
    super(props);
    this.state = {};
  }
  render() {
    return <div></div>;
  }
}
备注：constructor 中的props 使用当前组件接收props传值，看到把props传递给父组件。

image-20220728161008576

可以在当前的类组件中使用this.props获取组件传值。

 this.state={
  }
  //声明clas组件的state数据源   key:value
class组件中的状态如何到模板中使用
组件的模板中绑定数据

  render() {
    console.log(this.state);
    return <div>{this.state.msg}</div>;
  }
  //模板中绑定代码是{}
模板中绑定数据推荐使用

 render() {
    //获取state进行解构
    let { msg } = this.state;
    return <div>{msg}</div>;
  }
定义的state
 this.state = {
      msg: "hello world！",
      name: "btn",
      cName: "link",
      style: {
        width: 100,//可以不带单位  默认px  
        height: 30,
      },
      height:30
    };
render() {
    //获取state进行解构
    let { msg, name, cName, style,height} = this.state;
    return (
      <div>
        {/* 直接绑数据 */}
        <p>{msg}</p>
        {/* 绑定元素属性 */}
        <button name={name}>按钮</button>
        {/* 绑定元素的class属性 */}
        {/* ，class类名称直接解析 */}
        <button className={cName}>按钮</button>
        {/* 动态类+静态类切换 */}
        <button className={[true ? "link bg" : "bg"]}>按钮</button>
        <button className={true ? "bg link" : ""}>按钮</button>
        {/* style属性绑定 */}
        <button style={style}>按钮style</button>
        <button style={{width:true?'30px':'50px',height:height}}>按钮style</button>
      </div>
    );
  }
  //注意 class类名称关键字  官方提示将元素的class属性换成className
class组件中使用json数据格式

需要注意不能直接绑定整个集合但是 可以直接绑数组。

//定义的数据格式
 stuList: [
        {
          name: "小花",
          sex: "男",
          tel: 110,
        },
        {
          name: "小花1",
          sex: "男",
          tel: 110,
        },
        {
          name: "小花2",
          sex: "男",
          tel: 110,
        },
      ],
//UI上使用map方法进行映射
                 <table>
            <tbody>
              {stuList.map((item, index) => {
                return (
                  <tr key={index}>
                    <td>{item.name}</td>
                    <td>{item.sex}</td>
                    <td>{item.tel}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
数据中如果存在嵌套集合

             <table>
            <tbody>
              {stuList.map((item, index) => {
                return (
                  <tr key={index}>
                    <td>{item.name}</td>
                    <td>{item.sex}</td>
                    <td>{item.tel}</td>
                    <td>
                      {item.hobby.map((ho, hindex) => {
                        return <span key={hindex}>{ho}</span>;
                      })}
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
如果return返回模板标签返回 是多标签

image-20220728172052037

浏览器端会直接报错

image-20220728172113048

处理方案

    需要先引入react
    import React, { Component } from "react";
  {item.hobby.map((ho, hindex) => {
                        return (
                        //使用的是React.Fragment  内置组件
                          <React.Fragment key={hindex}>
                            <span key={hindex}>{ho}</span>
                            <span key={hindex}>{ho}</span>
                          </React.Fragment>
                        );
                      })}
如果项目中出现key值重复警告

image-20220728172812307

<tr key={`t-${index}`}>  //前面补个前缀 作为区分
出现这种错误是在虚拟DOM同级比对key时出现了相同的key，可以添加前缀区分。

条件判断json集合根据不同条件反模板

{stuList.map((item, index) => {
                //条件判断
                if (item.age <=10) {
                  return (
                    <tr key={index}>
                      <td>{item.name}</td>
                      <td>{item.sex}</td>
                      <td>{item.tel}</td>
                      <td>
                        {item.hobby.map((ho, hindex) => {
                          return (
                            <React.Fragment key={hindex}>
                              <span>{ho}</span>
                              <span>{ho}</span>
                            </React.Fragment>
                          );
                        })}
                      </td>
                    </tr>
                  );
                }
                else{
                   //return  null  阻止模板渲染
                   return null;
                }