React 父子组件之间如何通信。
参考答案
父组件要传数据给子组件很简单，直接放在 props 里即可
子组件要传递数据给父组件就复杂点：
父组件将一个函数 fn 作为子组件的 props 传给子组件
子组件在恰当的时候调用这个 fn，并且把数据放在 fn 的参数里
React 任意组件之间如何通信。
参考答案
- 使用 eventHub/eventBus 来通信
一个组件监听某个事件，另一个组件触发相同的事件并传参，即可实现两个组件的通信
缺点是事件容易越来越多，不好控制代码的复杂度 - 使用 Redux
每次操作触发一个 action
action 会触发对应的 reducer
reducer 会用旧的 state 和 action 造出一个新的 state
使用 store.subscribe 监听 state 的变化，一旦 state 变化就重新 render（render 会做 DOM diff，确保只更新该更新的 DOM）
React 的创举
虚拟DOM
- 标签就是函数
- 函数就是对象
- 标签的属性就是函数的参数
什么时候用函数什么时候用class
- 组件非常的纯净 没有内部状态
- 如果组件需要记录自己的内部状态
子组件怎么通知外界 （父子通信）
你只能通过回调的形式 调用别人给你传的参数
父元素传一个函数给子元素
子元素在恰当的时候调用这个函数
调用的时候可以传参数
useEffect怎么使用
useEffect(()=>{
依赖项发生变化执行回调
},[依赖项,依赖项,依赖项]);
如果只想执行一次 第二个参数 []
useState怎么使用
变量 使用 useState 定义 和 改变
const[x,setX] = useState(初始值)
通过第二个参数 setX 来 改变 x 的值
使用setX 来改变x值时, setX所在的 函数会重新执行
useRef怎么使用
跨组件的状态管理 使用 useRef
const xxx = useRef(初始值)
xxx.current = ...
Fragment
reutrn(
<Fragment>
<div><div>
</Fragment>
)
React.forwardRef
接受渲染函数作为参数。React 将使用 props 和 ref 作为参数来调用此函数。此函数应返回 React 节点
const FancyButton = React.forwardRef((props, ref) => (
<button ref={ref} className="FancyButton">
{props.children}
</button>
));
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;
会创建一个React组件，这个组件能够将其 参数ref 转发到其组件树下的另一个组件中
cloneElement()
React.cloneElement(
element,
[props],
[...children]
)
- 以 element 元素为样板克隆并返回新的 React 元素。
- 返回元素的 props 是将新的 props 与原始元素的 props 浅层合并后的结果。
新的子元素将取代现有的子元素， - 而来自原始元素的 key 和 ref 将被保留。
