react-app 项目初学（3）组件

一、组件的定义与使用

1.函数式组件：

这里注意定义组件的时候用大写首字母，因为小写的会被当做标签

2.类组件：

这里注意两个方面，（1）继承React.Component;（2）render(){ return ... } 一定要写

3.组件三大状态：

state:

事件绑定：

这里要注意改变事件中this的指向，否则this为undefined;

react里修改状态state的值不能直接this.state.xxx =xxx更改，要借助内置的api的setState方法更改

可以看到状态state更改成功，界面同步更新。

 另一方面，react组件在实际开发里可以简写

（1）state可以不用写再构造器constructer里，可以写在外面；

（2）自定义方法：写成赋值语句+箭头函数的形式，使其this指向正确；

例如 return <h1 onClick={() => this.changeWeather()}></h1>

箭头函数方式调用事件得话记得方法名后面一定要加括号

二、组件传值

props：

    1.父子组件之间传值可通过属性传值的方法,在父组件上定义一个属性字段，子组件通过{this.props+字段名称}去获取父组件传过来的值。

如果是批量props时，可以用展开运算符的形式表示：

例如：

注意：如果要给年龄+1展示，那么要传数值型的形式，{ value }

在真实项目里因为数据大都是接口请求的，字段很多，建议用这样的形式。

props限制：

在 react中，做静态类型检查用prop-types,npm install prop-types -D

使用示例：

    props的限制规则的定义如上图，可以看出name是需要传输字符串，如果这时候传数值型，就会报出警告。

如果需要必填，就在字段类型后加.isRequired

如果限制了必填但是没有传值，那么也会爆出警告

如果传的是个函数，那么就要设置类型为func

这里还有个属性defaultProps默认值设置

这里的意思是如果sex无值的时候就设置为不男不女，刷新界面可以看到设置成功

子组件若要传递一个事件到父组件，首先得在子组件里{this.props.+方法名},然后在父组件上把方法名当做一个属性,之后再触发父组件里的具体方法。

子组件：

父组件：

Context通信

Step 1：创建 context ：

首先，你需要创建这个 context，并 将其从一个文件中导出，这样你的组件才可以使用它：

Step 2：使用 Context 

方式1：

1. 引入定义的context 文件(import MainContext from './context')
2. <MainContext .Provider>xxxxx</MainContext .Provider>标签包裹要接收context传值的组件，通过value = {xxx}传递数据

接收context的文件里需要引入定义的（context文件）

需要定义 static contextType = MainContext（或者组件名.contextType= MainContext(context名称)），然后才能通过{this.context.xxx}使用context传递的对象的具体属性，

孙子组件使用：

常用结构语法参考：

循环: