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