React 学习笔记一 DOM

本文需要结合官网学习指南学习

编者:由于官方文档翻译机械,不符合国人思维再此用我们的描述表示一遍降低学习成本

学习材料

官网逐步学习指南

使用官方create-react-app的文件

文件 index.js。

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'zhou',
  lastName: 'he'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);
//显示到HTML中 id='root'的位置
ReactDOM.render(
  element,
  document.getElementById('root')
);

你也可以在原有HTML文件中添加新的东西

例如添加id=“tick” index.html的内容,我设置的功能是显示时间。

<div id="tick"></div>

问显示程序与后台程序如何交互呢?

答:就是通过特定的id关联,在id出插入显示

ReactDOM.render()括号里面就是插入的内容(这个内容符合特定的格式这里的格式是React的,如果是其他框架就有其他的格式)

index.js中添加

function tick() {
  const element = (
    <div>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('tick'));
}

setInterval(tick, 1000);

官方文档中

让我们来回顾一下这个例子中发生了什么：

1.我们调用 ReactDOM.render() 函数，并传入 <Welcome name="Sara" /> 
作为参数。
2.React 调用 Welcome 组件，并将 {name: 'Sara'} 作为 props 传入。
3.Welcome 组件将 <h1>Hello, Sara</h1> 元素作为返回值。
4.React DOM 将 DOM 高效地更新为 <h1>Hello, Sara</h1>。

简要描述就是使用index.js中函数的方式

const element = <Welcome name="Sara" />; 
Welcome 是函数名,name是输入参数

(不知道为什么用起来一股Python味儿,这也是脚本语言思维的一个走向吧)

可以多次调用,也可以有多个变量输入,调用方式较为灵活
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />

官方采用的是一个显示评论条的例子

Hello Kitty
I hope you enjoy learning React!
2020/12/14

这里的
<Avatar user={props.author} />
等价替换就是
<img className="Avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}
    />
文档中描述的就是React特定的格式的使用方法我没有技术在里面

下面的是结果直接粘贴在index.js中就是上面的例子其实就更直观一些,
自己的代码用这样的格式写别人也能轻易看懂
function formatDate(date) {
  return date.toLocaleDateString();
}

function Avatar(props) {
  return (
    <img
      className="Avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}
    />
  );
}

function UserInfo(props) {
  return (
    <div className="UserInfo">
      <Avatar user={props.user} />
      <div className="UserInfo-name">{props.user.name}</div>
    </div>
  );
}

function Comment(props) {
  return (
    <div className="Comment">
      <UserInfo user={props.author} />
      <div className="Comment-text">{props.text}</div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

const comment = {
  date: new Date(),
  text: 'I hope you enjoy learning React!',
  author: {
    name: 'Hello Kitty',
    avatarUrl: 'https://placekitten.com/g/64/64',
  },
};
ReactDOM.render(
  <Comment
    date={comment.date}
    text={comment.text}
    author={comment.author}
  />,
  document.getElementById('root')
);

Props 的只读性

意思就是函数输入变量只读,用的时候当作常量来用的不能改

State & 生命周期

setInterval(tick, 1000);按1000ms也就是1s的周期反复读取这个函数刷新UI

html文件添加
<div id="time"></div>
js文件添加
function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('time')
  );
}

setInterval(tick, 1000);

下面的就是不用setInterval函数一直刷新UI的方式 ,而是自动更新
(不太明白文档的描述)
如果要自动更新就要跟着这个方式定义函数

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('time')
);

将生命周期方法添加到 Class 中

这个就是一个过于麻烦地方他不能自动释放组件占用的资源
如果对于简单的网页应用的话State 这个方法比较鸡肋
但是当网页应用是个线上的和桌面大型程序相同的应用就必须要考虑到硬件消耗问题例如QQ这种活跃在线几亿人的平台,用这种方式开发能节省巨大 的成本
完全可以用JavaScript的方式实现