美文网首页
React 问答

React 问答

作者: xingkong_s | 来源:发表于2019-03-28 08:56 被阅读0次

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

相关文章

  • React 问答

    React 父子组件之间如何通信。 参考答案父组件要传数据给子组件很简单,直接放在 props 里即可子组件要传递...

  • React seed构建过程

    React seed构建过程 写在前面 Facebook发布react之后,一直想找机会学一下,从官网到博客到问答...

  • React Navigation 问答录

    使用 React Navigation 遇到了不少坑,总结记录自己遇到过的问题 (连载) 当我重置 StackNa...

  • React基础

    react 教程 react 组件介绍 react state 介绍 react Props 介绍 React:组...

  • 现在国内比较有名的问答平台

    MIUI论坛 乐维 悟空问答 问答小屋 略晓 知乎 雅虎知识堂 果壳问答 360问答 搜搜问答 热问 百度知道 搜...

  • 学习react no.1

    学习react no.1 react 定义 react 特点 react

  • React Native 学习之路

    React 相关资料 React Components React Properties React State ...

  • React基础

    React包含react元素和react组件 react元素 react组件 react组件分为函数组件和类组件 ...

  • React面试题 整理脑图

    react基础 React生命周期 react-router react进阶 react Hooks redux 其他

  • react 导入中的 as

    import React from 'react'只导入 是 React。 而import * as React ...

网友评论

      本文标题:React 问答

      本文链接:https://www.haomeiwen.com/subject/osjfbqtx.html