React笔录

发布日期: 2022-03-11

阅读时长: 6 分

阅读次数:

一：React入门

1)：HTML模板

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      // ** Our code goes here! **
    </script>
  </body>
</html>

script的type属性为text/babel,React独有的JSX语法，不兼容JavaScript（使用JSX语法，都需加入type="text/babel"
以👆代码库：raect.js(react的核心库)、react-dom.js(提供与dom相关的功能)、brower.min.js(将JSX语法转换为JavaScript语法)
```
babel src --out-dir build
```
命令可以将 src 子目录的 js 文件进行语法转换，转码后的文件全部放在 build 子目录

2)：ReactDOM.render()

定义：ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点
```
<script type="text/babel">
ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
  );
</script>
```
- 代码将一个 h1 标题，插入 example 节点

3)：JSX语法

不加任何引号就是JSX语法(允许html和javascript混写)

<script type="text/babel">
var names = ['Alice', 'Emily', 'Kate']

  ReactDOM.render(
      <div>
          {names.map(function (name, index) {
            console.log(index);
            return <div key={index} data-id={index+1}>{index+1}Hello, {name}!</div>
          })}
      </div>,
    document.getElementById('example')
  )
</script>

代码体现了 JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析

JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员

<script type="text/babel">
var arr = [
    <h1 key="1" data-id="1">Hello world!</h1>,
    <h2 key="2">React is awesome</h2>,
  ];
  ReactDOM.render(
    <div key="1">{arr}</div>,
    document.getElementById('example')
  );
</script>

4)：组件

将代码封装为组件，插入组件(和普通HTML一样)，React.createClass方法生成一个组件类。
```
<script type="text/babel">
class HelloMessage extends React.Component {
      render() {
        return <h1>Hello {this.props.name}</h1>;
      }
    }

  ReactDOM.render(
    <HelloMessage name="John" />,
    document.getElementById('example')
  )
</script>
```
- 变量 HelloMessage 就是一个组件类。模板插入 <HelloMessage /> 时，会自动生成 HelloMessage 的一个实例（下文的”组件”都指组件类的实例）。所有组件类都必须有自己的 render 方法，用于输出组件
  
  注意，组件类的第一个字母必须大写，否则会报错，比如HelloMessage不能写成helloMessage。另外，组件类只能包含一个顶层标签，否则也会报错
```
<script type="text/babel">
class HelloMessage extends React.Component {
      render() {
        // JSX表达式必须有一个父元素
        return <h1>Hello {this.props.name}</h1><p>some text</p>;
      }
    }

  ReactDOM.render(
    <HelloMessage name="John" />,
    document.getElementById('example')
  )
</script>
```
- 组件的用法与原生的 HTML 标签完全一致，可以任意加入属性，比如 <HelloMessage name="John"> ，就是 HelloMessage 组件加入一个 name 属性，值为 John。组件的属性可以在组件类的 this.props 对象上获取，比如 name 属性就可以通过 this.props.name 读取

5)：this.props.children

定义：this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点

<script type="text/babel">
class NotesList extends React.Component {
    render() {
      console.log(this.props.children instanceof Array);
      return (
        <ol>
          {
            React.Children.map(this.props.children, function (child) {
              return <li>{child}</li>;
            })
          }
        </ol>
      );
    }
  }

  ReactDOM.render(
    <NotesList>
      <span>hello</span>
      <span>world</span>
    </NotesList>,
    document.getElementById('example')
  );
</script>

this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array
React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object

6)：PropTypes

定义：组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求（验证别人使用组件时，提供的参数是否符合要求）

<script type="text/babel">

var data = 123;

  class MyTitle extends React.Component {
    static propTypes = {
      title: PropTypes.string.isRequired,
    }
    render() {
      return <h1> {this.props.title} </h1>;
    }
  }

  ReactDOM.render(
    <MyTitle title={data} />,
    document.getElementById('example')
  );

</script>

则有错误信息

Warning: Failed propType: Invalid prop `title` of type `number` supplied to `MyTitle`, expected `string`.

getDefaultProps 方法可以用来设置组件属性的默认值

<script type="text/babel">
  var data = "123";
    class MyTitle extends React.Component {
      static propTypes = {
        title: PropTypes.string.isRequired,
      }
      render() {
        return <h1> {this.props.title} </h1>;
      }
    }
    MyTitle.defaultProps = {
      title:"你好啊"
    }
  
    ReactDOM.render(
      <MyTitle />,
      document.getElementById('example')
    );
</script>

7)：获取真实的DOM节点

定义：组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。

获取真实DOM节点则使用ref属性

<script type="text/babel">
class MyComponent extends React.Component {
    constructor(props) {
      super(props);
      this.myTextInput = React.createRef();
      this.handleClick = this.handleClick.bind(this)
    }
    handleClick() {
      this.myTextInput.current.focus();
    }
    render() {
      return (
        <div>
          <input type="text" ref={this.myTextInput} />
          <input type="button" value="Focus the text input" onClick={this.handleClick} />
        </div>
      );
    }
  }

  ReactDOM.render(
    <MyComponent />,
    document.getElementById('example')
  );
</script>