为了账号安全,请及时绑定邮箱和手机立即绑定

【学习打卡】第3天 React组件学习

标签:
React.JS React

课程名称:RN入门到进阶,打造高质量上线App(2022全新升级)

课程章节:2-8 React必备基础讲解-1

主讲老师:CrazyCodeBoy

课程内容:今天学习的主要内容包括:react入门,学习编写react组件。

课程收获:

  1. 在React中可以使用数组的形式来进行组件的编写

老师说,建议对组件要减少一些嵌套。因为在RN里面,层级少一些的话,会加快渲染的速度。

示例代码:

import React from "react";

class App extends React.Component {
  render(): React.ReactNode {
    let views = [];
    views.push(<h1>1111</h1>)
    views.push(<h1>2222</h1>)
    return views;
  }
}

export default App;
  1. 学习新的方法,遍历对象的属性

在React里面this.props.chridren会返回组件对象的所有属性,react提供了方法React.Children来处理this.props.chridren

示例代码:

class NotesList extends React.Component<IProps> {
  render(): React.ReactNode {
    return (
      <ol>
        {React.Children.map(this.props.children, (child) => {
          return <h1>{child}</h1>
        })}
      </ol>
    )
  }
}

然后在引用这个组件

class App extends React.Component {
  render(): React.ReactNode {
    let views = [];
    views.push(<h1 key={1}>1111</h1>)
    views.push(<h1 key={2}>2222</h1>)
    views.push(<NotesList key={3}>
      <span>1</span>
      <span>2</span>
    </NotesList>)
    return views;
  }
}

export default App;

这个时候页面就会把span给放到h1里面去显示了

  1. ref属性

我们在需要使用到组件的真实节点时可以用这个方法。

先定义一个测试的类

class Alert extends React.Component {
  showAlert(msg: string) {
    alert(`Debug:${msg}`)
  }
  render(): React.ReactNode {
    return null
  }
}

在父组件引用

class App extends React.Component {

  setTextInputRef: React.Ref<Alert>;

  textInput: Alert | null | undefined;

  constructor(props: {} | Readonly<{}>) {
    super(props);
    this.setTextInputRef = element => {
      this.textInput = element;
    };
  }

  onClick = () => {
    this.textInput?.showAlert("111");
  }

  render(): React.ReactNode {
    return <>
      <Alert ref={this.setTextInputRef} />
      <h1 onClick={this.onClick}>点我</h1>
    </>
  }
}

export default App;

然后点击的话,可以看到有个弹窗出来
图片描述

在上面的代码。APP组件的子节点有一个Alert组件,我们可以通过Ref来对这个组件内部的方法进行调用。

需要注意的是,因为refs获取的是真实Dom。所以我们必须要等到Dom渲染完成后进行获取,否则会报错。就用到了生命周期。

今天学习课程加练习一共用了40分钟,学习了两个React的方法,发现自己还有很多知识点没有涉及到,希望每天都能有这样的收获

图片描述

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消