React脚手架-起飞！React脚手架-起飞！ React项目结构 React的组件化类组件函数组件生命周期父

React脚手架-起飞！

本地安装脚手架npm i create-react-app -g

创建React项目

注意：项目名称不能有大写字母 create-react-app 项目名称
进入目录，把项目跑起来 cd 项目名称 然后启动项目 npm start

React项目结构

了解PWA

React的组件化

类组件

类组件的定义要求

组件的名称是大写字符开头（无论是类组件还是函数组件）
类组件需要继承自React.Component
类组件必须实现render函数

使用class定义一个组件

contructor是可选的，初始化数据
this.state中维护的就是我们组件内部的数据
render()方法是class组件中唯一必须实现的方法

render函数的返回值

React元素（通常通过jsx创建、<div/>和<MyComponent />都是React元素）
数组或fragments:使得render方法可以返回多个元素
Portals：可以渲染子节点到不同的DOM子树中
字符串或数值类型：在DOM中会被渲染为文本节点
布尔类型或null/undefined:什么都不会渲染

import React, { Component } from "react";
export class App extends Component {
  render() {
    // 1.react元素：通过jsx编写的代码就会被编译成React.createElement,所以返回值就是一个React元素
    // return <div>App</div>

    // 2.组件或者fragments
    // return ["dhs","zm","ww"]
    return [<h1>h1</h1>, <h2>h2</h2>, <div>zm</div>];
  }
}
export default App;

函数组件

函数组件的特点

没有生命周期，也会被更新并挂载，但是没有生命周期函数
this关键字不能指向组件实例（因为没有组件实例）
没有内部状态（state）

export default function App() {
    return (
        <div>zm</div>
    )
}

认识React生命周期函数

constructor

如果不初始化state或不进行方法绑定，则不需要为React组件实现构造函数
constructor中通常只做两件事情（1.通过给this.state赋值对象来初始化内部的state;2.为事件绑定实例this）

componentDidMount

componentDidMount()会在组件挂载后（插入DOM树中）立即调用
componentDidMount中通常进行哪些操作（依赖于DOM的操作，网络请求，添加订阅<会在componentWillUnmount中取消订阅>）

componentDidUpdate

componentDidUpdate()会在更新后会被立即调用，首次渲染不会执行此方法
当组件更新后，可以在此处对DOM进行操作
如果你对更新前后的props进行了比较，也可以选择在此处进行网络请求（例如，当props未发生变化时，则不会执行网络请求）

componentWillUnmount

componentWillUnmount()会在组件卸载及销毁之前直接调用
在此方法执行必要的清理操作，例如清除timer,取消网络请求，清除componentDidMount()中创建的订阅

生命周期图解

组件嵌套

在父组件中使用子组件，实际上是创建了一个子类组件的实例对象，会执行子组件内部的构造函数

render(){
    return(
        <div>
            <Children />
            <Children />
            <Children />
        </div>
    )
}

父子组件通信

父传子：

父组件通过属性=值的形式来传递给子组件数据
子组件通过props参数获取父组件传递过来的数据

父传子代码

                                          父组件App.jsx
import { Component } from "react";
import Banner from "./Banner";
import Recommend from "./Recommend";
export class App extends Component {
  constructor(props) {
    super();
    this.state = {
      banner: [],
      recommend: [],
    };
  }
  componentDidMount() {
    fetch("http://123.207.32.32:8000/home/multidata")
      .then((res) => res.json())
      .then((res) => {
        const { banner, recommend } = res.data;
        this.setState({
          banner: banner.list,
          recommend: recommend.list,
        });
      });
  }
  render() {
    const { banner, recommend } = this.state;
    return (
      <div>
        <Banner banner={banner} />
        <Recommend recommend={recommend} />
      </div>
    );
  }
}
export default App;

                                          子组件Banner.jsx
import React, { Component } from "react";
export class Banner extends Component {
  render() {
    const { banner } = this.props;
    return (
      <div>
        <ul>
          {banner.map((item) => {
            return <li key={item.acm}>{item.title}</li>;
          })}
        </ul>
      </div>
    );
  }
}
export default Banner;

                                          子组件Recommend.jsx
import React, { Component } from "react";
export class Recommend extends Component {
  render() {
    const { recommend } = this.props;
    return (
      <div>
        <ul>
          {recommend.map((item) => {
            return <li key={item.acm}>{item.title}</li>;
          })}
        </ul>
      </div>
    );
  }
}
export default Recommend;