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调用

									 学习的时光总是短暂，又到了时候说拜拜
											欢迎关注公众号  oldCode
												获取新鲜教程资料