最后
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。
我特地针对初学者整理一套前端学习资料
import React from "react";
import PropTypes from 'prop-types';
class Child extends React.Component{
static propTypes = {
data: PropTypes.string
}；
static defaultProps = {
data: '子组件默认数据',
};
render(){
return(
)
}
}
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(
)
}
}
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}
)
}
}
//孙组件（函数组件）
function D(){
return(
我是D组件
我从A组件接收到的用户名是：
{
value => {
retrun ${value.useName}
}
}
)
}
方法二：Observer Pattern（观察者模式）
观察者模式是软件设计模式里很常见的一种，它提供了一个订阅模型，假如一个对象订阅了某个事件，当那个事件发生的时候，这个对象将收到通知。
这种模式对于我们前端开发者来说是最不陌生的了，因为我们经常会给某些元素添加绑定事件，会写很多的event handlers，比如给某个元素添加一个点击的响应事件elm.addEventListener(‘click’, handleClickEvent)，每当elm元素被点击时，这个点击事件会通知elm元素，然后我们的回调函数handleClickEvent会被执行。这个过程其实就是一个观察者模式的实现过程。
那这种模式跟我们讨论的react组件通信有什么关系呢？当我们有两个完全不相关的组件想要通信时，就可以利用这种模式，其中一个组件负责订阅某个消息，而另一个元素则负责发送这个消息。javascript提供了现成的api来发送自定义事件: CustomEvent，我们可以直接利用起来。
首先，在ComponentA中，我们负责接受这个自定义事件：
class ComponentA extends React.Component {
componentDidMount() {
document.addEventListener('myEvent', this.handleEvent)
React
-
介绍一下react
-
React单项数据流
-
react生命周期函数和react组件的生命周期
-
react和Vue的原理，区别，亮点，作用
-
reactJs的组件交流
-
有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢
-
项目里用到了react，为什么要选择react，react有哪些好处
-
怎么获取真正的dom
-
选择react的原因
-
react的生命周期函数
-
setState之后的流程
-
react高阶组件知道吗？
-
React的jsx，函数式编程
-
react的组件是通过什么去判断是否刷新的
-
如何配置React-Router
-
路由的动态加载模块
-
Redux中间件是什么东西，接受几个参数
-
redux请求中间件如何处理并发
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
