React的类组件与函数组件

2023-01-06 110

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： React的类组件与函数组件

安装创建React项目

方法一：创建

全局安装

yarn global add create-react-app

创建项目

create-react-app 23react-demo-1

运行项目

yarn start

方法二：引入链接

需要引入react和reactDom库

<script src="https://cdn.bootcdn.net/ajax/libs/react/16.10.2/umd/react.production.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js"></script>
<script src="src/index.js"></script>

无论是创建还是引入都要获取React对象和ReactDOM对象在index.js中引入

//获取React对象ReactDOM对象
const React = window.React;
const ReactDOM = window.ReactDOM;
//获取根元素
const root = document.querySelector("#root");
let n = 0; 
//创建一个名为App的节点           标签名  节点的class名为red   节点的内容要用[]括住
const App = React.createElement("div", { className: "red" },
 [
   n,
   //在节点里添加一个按钮        方法{}    内容
   React.createElement('button',
   {
       onClick:()=>{
           n+=1;
       }
   },
   '+1'),
 ]
 );
//将节点渲染到根节点里
ReactDOM.render(App, root);

React创建组件的两种方式

类组件

先在调用他的里面标签里输入数据，使用{ }输入变量，使用“常量”：messageForSon=“儿子”

<Son messageForSon={55*2} />

类组件一定要使用constructor初始化数据，并且要有super()方法

class Son extends React.Component{
    constructor(){
        super()
        this.state={
            n:0
        };
    };
    add(){
        // this.state.n+=1
        this.setState({ n: this.state.n + 1 });
    };
    render(){
        return(
            <div className="Son">
               儿子 n:{this.state.n}
               <button onClick={()=>this.add()}>+1</button>
+               {this.props.messageForSon}
               <Grandson message="孙子"/>
            </div>
        )
    }
};

类组件的constructor()与add()方法和render()渲染是并列的

函数组件

函数组件使用props接收参数，直接使用props.message调用 n时原始值：读，setN是修改值：写

const Grandson = (props)=>{
    const [n,setN] = React.useState(0)
    return(
        <div className="Grandson">
            孙子 n:{n}
            <button onClick={()=>setN(n+1)}>+1</button>
 +           {props.message}
        </div>
    )
}

两种方式的props

类组件使用props渲染数据时，要使用this.props.变量名接收父组件调用传入的参数；使用本组件内部的数据时用this.state.变量

函数组件使用数据时，不用this，直接使用props调用