React学习day03-components插件安装（仅基于火狐浏览器）、受控表单绑定、在React中获取dom、组件通信（组件间的数据传递）

7、components插件安装（仅基于火狐浏览器）

（1）点击“打开应用程序菜单”

（2）点击“扩展和主题”

（3）在“扩展”的“寻找更多组件”搜索“Components”，找到“React Developer Tools”

（4）点击“安装”

（5）在浏览器页面，右键“检查”

8、受控表单绑定（效果上类似于vue表单的双向绑定）

（1）作用：使用React组件的状态（useState）控制表单的状态

（2）步骤：

1)准备一个React状态值，将状态值绑定到表单的value属性上

2)通过value属性绑定状态，通过onChange属性绑定状态同步的函数，将表单的最新的value值设置给state

9、在React中获取dom

（1）工具：userRef函数

（2）步骤：

1）使用userRef获取ref对象，并用ref=“ref对象名”于JSX绑定

2）在DOM可用时（页面渲染完成之后），通过ref对象名.current获取DOM对象

10、组件通信（组件间的数据传递）

根据嵌套关系的不同，有不同的通信方法

已知：

（1）父子通信

1）父传子

①父组件在子组件标签上绑定属性，传递数据（假设传递数据为姓名）

②子组件通过props接收数据

2）父传子之props

①props可以传递任意数据（数字、字符串、布尔值、数组、对象、函数、JSX）

②props是只读对象（子组件只能读取使用props的数据，不能直接修改，否则会报错）（props中的父组件数据只能由父组件修改）

③children

当把内容嵌套在子组件的标签中，父组件会自动再命名为children的props属性值接收该内容

3）子传父

已知：

①父组件声明方法，再将函数传递给子组件

②给子组件绑定点击方法，将需要变化的值传递给父组件

③父组件可以在最初声明的函数中获取到子组件传递的值

（2）兄弟通信（通过父组件实现兄弟通信）

已知：

1）子1传父步骤

        ①定义父组件的函数

        ②父组件传递函数给子组件1

        ③子组件1通过解构获得函数，并传参给父组件

        ④检查子组件1是否成功传参给父组件

2）父传子2

        ①将父组件中的数据设为动态的（useState）

        ②父组件将数据传递给子组件2

        ③子组件2通过props进行接收，传递的值，然后渲染

（3）跨层通信（比如：爷孙关系、父子关系）（使用Context机制实现跨层级组件通信）

1）步骤：

        ①使用createContext方法创建一个上下文对象Ctx

        ②在顶层组件中通过上下文对象Ctx.Provider组件提供数据

        ③在底层组件中通过useContext钩子函数获取消费数据

2）示例（将父组件的name传给孙组件）

已知：

①导入createContext，创建一个上下文对象，用一变量接收

②调用创建的上下文对象，通过Provider提供标签将根组件的内容包裹起来

③通过useContext在孙组件中解析createContext创建的上下文对象，并使用