文章仅个人自学笔记
首先直接根据umi快速创建了一个架子（https://umijs.org/zh-CN/docs/getting-started）
一、自定义组件
react组件大致可分为‘函数组件’和‘类组件’
1、函数组件：不具有state状态以及不具有render()方法
函数组件文件也需要引入react, import React from "react"否则会报react找不到等问题
例如：
定义函数组件
使用函数组件
2、类组件：具有state状态、必须有render()方法、需要在构造方法中使用super(props)才可在组件的后续内容中使用this;
定义类组件
使用类组件
二、关于 props和state
state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。
1、props
用于存储父组件传递给子组件的参数；React会将传递的参数转换为对象赋值给props;
只读属性；子组件接收父组件的props参数，子组件不可修改；
实例化：从父组件传递过来，在子组件中通过super(props)实例化；
默认 Props：你可以通过组件类的 defaultProps 属性为 props 设置默认值，如下图
定义默认属性
2、state
用于给组件内部提供数据，检测组件自身数据的变化；（因为不能修改props属性，所有需要state来记录组件自身变化）
只有类组件才具有状态
初始化位置: 构造方法中
作用域：组件内
不可在render()方法中修改state对象的值，会造成死循环；
不可在state对象中定义render()方法中不需要的数据，影响渲染性能；
三、父子组件间的通信
1、父传子
父组件传值：
父组件传值
子组件接收
子组件接收
2、子组件传值给父级
子组件定义函数进行传值，下图中子组件在cb方法中定义了一个名为ziChuanZhi的属性，然后通过调用该方法进行传值，
定义传值函数
父组件接收值，父组件通过在子组件上将子组件定义的属性ziChuanZhi方法进行接收值，如下图定义callback函数接收子组件返回的值
父组件接收内容
网友评论