React学习笔记十二——组件之间的通信方式

import React from “react”;

import PropTypes from ‘prop-types’;

class Child extends React.Component{

static propTypes = {

data: PropTypes.string

}；

static defaultProps = {

data: ‘子组件默认数据’,

};

render(){

return(

{Tthis.props.data}

)

}

}

class Parent extends React.Component {

state = {

data: ‘我是父组件的数据’

}

render() {

return (

)

}

}

子组件 => 父组件

---

方法一：Instance Methods（实例方法）

原理和前面的非受控组件一样，就是父组件可以通过使用refs来直接调用子组件实例的方法；

import React from “react”;

class Child extends React.Component{

click = () => {

return ‘我是子组件的数据’

}

render(){

return(

{Tthis.props.name}

)

}

}

class Parent extends React.Component {

componentDidMount(){

var data = this.child.click() // 我是子组件的数据

}

render() {

return (

<Child ref={a => this.child = a} />

)

}

}

方法二：Callback Functions（回调函数）

子组件通过调用父组件传来的回调函数，从而将数据传给父组件；

import React from “react”;

import PropTypes from ‘prop-types’;

class Child extends React.Component{

static propTypes = {

onClick: PropTypes.fun

}；

render(){

return(

)

}

}

class Parent extends React.Component {

handleClick = (data) => {

console.log("父组件从子组件接受的数据是: " + data)

}

render() {

return (

)

}

}

方法三：Event Bubbling（事件冒泡）

巧妙的利用下事件冒泡机制，我们就可以很方便的在父组件的元素上接收到来自子组件元素的点击事件

class Parent extends React.Component {

handleClick = () => {

console.log(‘clicked’)

}

render() {

return (

);

}

}

function Child {

return (

Click

);

}

兄弟组件之间

---

借助父组件

首先我们可以看看它们是否是兄弟组件，即它们是否在同一个父组件下。如果不是的话，考虑下用一个组件把它们包裹起来从而变成兄弟组件是否合适。这样一来，它们就可以通过父组件作为中间层来实现数据互通了。

class Parent extends React.Component {

state = {count: 0}

setCount = () => {

this.setState({count: this.state.count + 1})

}

render() {

return (

<SiblingA

count={this.state.count}

/>

<SiblingB

onClick={this.setCount}

/>

);

}

}

不相干的组件之间

---

方法一：Context

一种组件通信的方式，常用于祖组件与后代组件之间的通信；

我们上一章详细的讲过Context的使用方式，这里我们直接放个案例，如果想详细了解可以去上一张看一下；

const MyContext = React.createContext()

const {Provider,Consumer} = MyContext

//祖组件

class A extends React.Component{

state = {

useName:‘A组件’

}

render(){

const {useName} = this.state

return(

我是A组件，用户名为：{useName}

)

}

}

//子组件

class B extends React.Component{

render(){

return(

我是B组件

我从A组件接收到的用户名是：{}

)

}

}

//孙组件（类组件）

class C extends React.Component{

static contextType = MyContext //声明需要接收context

render(){

return(

我是C组件

我从A组件接收到的用户名是：{this.context}

)

}

}

//孙组件（函数组件）

专业技能

一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题

• HTML+CSS
• JavaScript
• 前端框架
• 前端性能优化
• 前端监控
• 模块化+项目构建
• 代码管理
• 信息安全
• 网络协议
• 浏览器
• 算法与数据结构
• 团队管理
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。

其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等

由于文章篇幅有限，仅展示部分内容