React 问答

---

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 将被保留。