课程名称：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;

2. 学习新的方法，遍历对象的属性

在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里面去显示了

3. 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的方法，发现自己还有很多知识点没有涉及到，希望每天都能有这样的收获