创建项目的方式：

方式一：

安装react脚手架：
npm i create-react-app -g 全局安装

创建一个react项目：
create-react-app myapp myapp是项目的名字

方式二：

如果不想全局安装create-react-app，那么可以使用npx
npx create-react-app myapp
使用脚手架创建的项目，默认有这几个库：
1）react raect顶级库（核心库）
2）react-dom react代码要在web上运行，就需要使用react-dom 如果你的代码需要在原生app上运行，你需要引入react-native
3）react-scripts 包含了运行或打包react项目的配置和脚本

运行项目：

cd myapp
npm run start

react中组件的使用

①创建组件，然后再通过export default 导出
②然后在src中的入口(index.js)中导入
③通过ReactDom.render来渲染
例：

import ReactDOM from "react-dom"
import MyCom from "./components/MyCom"
ReactDOM.render(<MyCom name="react" link="https://react.docschina.org/" />, document.getElementById("root"))

通过class创建的组件接收数据：{this.props.xxx}
函数创建的组件接收数据：{props.xxx}即可

对props类型的校验

首先要引入：

import PropTypes from 'prop-types'

写法1（一般放最下边）：

MyCom.propTypes  = {
    
    
    name:PropTypes.string,// 期待传入的name是一个string类型
}
MyCom.defaultProps = {
    
    
    address:"bj"
}

写法2（一般放constructor下边，render上边）：

static defaultProps = {
    
    
    address:"bj"
 }
 static propTypes = {
    
    
    link:PropTypes.string
}

组件中状态的使用

状态（state）:
在react中组件是核心之一，组件中状态是核心，有人把react也叫状态机。
状态是react组件内部的数据，不需要外部传入。类似于vue中data。
定义状态的方式一推荐

constructor(){
    
    
    super();
    this.state = {
    
    
        number:100
     }
}

定义状态的方式二

    constructor(){
    
    
        super();
    }
    state = {
    
    
        number:666
    }

在jsx中就可以使用状态

    render(){
    
    
        return (
            <div>
                {
    
    /* 在jsx中就可以使用状态 */}
                <h1>{
    
    this.state.number}</h1>
            </div>
        )
    }

更新状态：

更新状态在react中提供一个api，叫setState 类似于小程序中的中setData
更新状态机（在小程序中也需要更新状态机）
如果更新了状态机，那么它会自动调用render函数

//onClick是封装的属性，_dealChangePerson()是自己定义的方法
<button onClick={
    
     ()=>this._dealChangePerson() }>xxx</button>

    //直接在下面定义就行
    _dealChangePerson(){
    
    
        this.setState({
    
    
        })
    }

componentDidMount()

钩子函数：也可以用来修改状态
并不是每一次render后都要执行DidMount
在react中，修改状态的唯一途径是setState
更新状态的方式一(推荐）

    componentDidMount(){
    
    
         setTimeout(()=>{
    
    
            // 更新状态机（只要状态更新了，render函数就会重新执行）
            this.setState({
    
    
                counter:100
            })
        },2000)
   }

更新状态的方式二

   componentDidMount(){
    
    
        setTimeout(()=>{
    
    
            this.state.counter = 100
            this.setState({
    
    }); // 会引起重新render
        },2000)
   }

对于类组件来说，它的数据源可以是state，也可以是props

如果setState的参数是一个函数，函数默认有两个形参
形参1：表示上一次的状态
形参2：表示当前的组件接收的数据
更新状态必须在this的setState在次return，想要获取最新数据需要在第二个函数参数里获取

    componentDidMount(){
    
    
        // setState的参数可以是一个函数
        // 如果setState的参数是一个函数，函数默认有两个形参
        // 形参1：表示上一次的状态
        // 形参2：表示当前的组件接收的数据
        this.setState((preState,props)=>{
    
    
            console.log(preState, props);
            // 更新状态
            return {
    
    
                counter:preState.counter+100
            }
        }, ()=>{
    
      // setState中可以指定第二个函数参数
            // 在这里，可以获取最新的状态
            console.log(this.state.counter);
        })
    }

props和state

state是组件内部的状态，在组件内部可以通过setState进行修改，state修改了，界面会重新渲染。
state是组件内部的，局部地，只能在当前组件中使用的数据源。其它组件是不能使用或修改state的。
props是在使用组件时，传递给组件内部的数据，主要是外部传入的数据，react不推荐在组件内部修改props。
如果你搞不清楚，在一个组件中使用props还是使用state，那么推荐使用props。尽量少地使用state，多用props。
如果说一个组件中有state，那么这个组件叫有状态组件，使用class声明的组件就是有状态组件。
如果一个组件中没有state，那么这个组件叫无状态组件，使用函数声明的组件就是无状态组件，函数式组件+hooks也可以达到在函数组件中使用状态的目的。

props和state:

1）属性能从父组件中获取，状态不可以，状态是组件自身的，内容的，局部的。
2）属性可以在父组件中修改，修改了，传入给子组件中的props数据会也发生改变。也会引起render重新执行。
3）属性可以设置默认值，状态也可以设置默认值
4）不要组件中修改属性的值，但是，状态的值通常我们会修改
…

react脚手架的基本使用