网站做了301怎么查看跳转前网站教育培训机构推荐

本文作者：开课吧木木
图文编辑：开三金

上一期讲了react基本概念、jsx语法and脚手架。

需要复习的小伙伴，点击下方的传送门☟

react基本概念、jsx语法and脚手架

今天木木来给大家讲一下：react组件的状态和通信

组件之状态与通信

在React.js中，定义一个组件的最简单的方式就是 函数

函数式组件：

// 函数的名称就是组件的名称，必须是首字母大写

// 函数的返回值就是组件要渲染的内容

类组件：

数据的传入和接收

组件复用 - 数据传入：

接收参数 -props：

函数式组件：通过函数的第一个参数来接收；

类式组件：通过类的 props 属性接收；

无论是函数式组件还是类式组件，都会把传入的参数封装成一个对象。

通过参数动态渲染组件结构：

关于子组件

子组件提取：

组件与类一样，是一个不断提取的过程。

当我们发现某个部分可复用或者结构复杂的时候，我们可以对它再次进行提取：

组件状态：

组件状态是什么？

状态被用来存储组件在某段时间内状态改变的信息。

用户事件或系统事件会导致一些经典的状态改变。(比如：对用户输入的回应、服务器的请求、生命周期函数)

组件 state 工作是这样的：

先给组件设置一个默认状态，再获取当前状态，最后更新这个状态。

修改 state 的正确姿势：

不能直接修改state在React中，直接修改state并不会触发render函数，所以下面的写法是错误的。

setState方法由父类React.Component提供，当该方法被调用时，组件的state会被更新。

同时会被重新调用组件的render方法对组件进行渲染。

组件构造函数是唯一可以对 state 直接赋值(初始化)的位置

绑定事件：

React.js的事件绑定需要注意：

▶事件名称是驼峰命名的

▶事件绑定函数的this指向

▶通过bind改变this指向，为了能够在方法中调用对象的属性和其他方法，  我们需要把this指向组件

▶通过箭头函数处理

如上代码： 

事件绑定函数的第一个参数是事件对象 因为this指向了组件对象，那么获取当前事件触发元素，可以通过e.target来获取。

获取原生DOM对象：

有的时候我们也是需要操作原生DOM对象的，除了可以通过事件源来获取，还可以通过ref的方式来获取：

事件的更新

更新异步：

出于性能考虑，setState方法的修改并不是立即生效的

更新合并 React会把多个setState合并成一个调用：

props与state的区别：

state的主要作用是用于 组件保存、控制、修改自己的可变状态。

在组件内部进行初始化，也可以在组件内部进行修改，但是组件外部不能修改组件的state

props的主要作用是让使用该组件的父组件可以传入参数来配置该组件，它是外部传进来的配置参数，组件内部无法控制也无法修改。

state和props都可以决定组件的外观和显示状态。

通常，props作为不变数据或者初始化数据传递给组件，可变状态使用state

能使用props就不要使用state了。

组件的种类和通信方式

无状态组件：

没有状态的组件，我们成为 无状态组件。

因为状态会带来复杂性，所以，通常我们推荐使用无状态组件。

函数式组件没有state,所以通常我们编写使用函数式组件来编写无状态组件。

数据流：

在React.js中，数据是从 上自下流动(传递) 的。

也就是一个父组件可以把它的state/props通过props传递给它的 子组件 。

但是子组件不能修改props。

React.js是单向数据流。

如果子组件需要修改父组件状态(数据)，是通过 回调函数 方式来完成的。

React组件通信方式汇总：

需要组件之前进行通信的几种情况：

●父组件向子组件通信

●子组件向父组件通信

●跨级组件通信

●没有嵌套关系组件之间的通信

父组件向子组件通信：

父组件通过向子组件传递props,子组件得到props后进行相应的处理

子组件向父组件通信：

跨级组件通信：

用contextcontext是一个全局变量，像是一个大容器，在任何地方都可以访问到。

我们可以把要通信的信息放在context上，然后在其他组件中可以随意取到。

使用context也很简单，需满足：

1、上级组件要声明自己支持context,提供context中属性的PropTypes,并提供一个函数来返回相应的context对象

2、子组件要声明自己主要使用context,并提供其需要使用的context属性的PropTypes

3、父组件需提供一个getChildContext函数，以返回一个厨师的context对象如果组件中使用构造函数(constructor)。

还需要在构造函数中传入第二个参数context,并在super调用父类构造函数时传入context,否则会造成组建中无法使用context。

下面例子中的组件关系：ListItem是List的子组件，List是app的子组件：

使用context也很简单，需满足：

没有嵌套关系的组件通信(兄弟组件)

实现这样一个功能： 

点击List2中的一个按钮，改变List1中的信息显示(List1和List2没有任何嵌套关系，App是他们的父组件)

首先需要项目中安装events包：

  npm install events --save

在src下新建一个util目录里面见一个events.js

list1.js▼

List2.js▼

APP.js▼

自定义事件是典型的发布订阅模式。

通过向事件对象上添加监听器和触发事件来实现组件之间的通信。

▼关注我▼

看下期“React的生命周期和路由”

你“在看”我吗？