初识 React - 文章教程

初识 React

发布于 2021-08-29 字数 5696 浏览 927 评论 0

react 是一个 js 库,更加关注视图的构建。在原生 h5 应用中,js 操作 dom 代价是非常昂贵的,react 是以最小代价(最少次数)去操作 dom,但不一定比原生 js 操作 dom 快。

与原生 js 做比较

// html
<div id="app"></div>

// js
<script>
  document.getElementById('app').innerHTML = '<h1>hello, world pure</h1>'
</script>

// react
<script src="../lib/react.js"></script>
<script src="../lib/react-dom.js"></script>
<script src="../lib/babel.min.js"></script>
<script type="text/babel">
  ReactDOM.render(
    <h1>hello, world</h1>,
    document.getElementById('app')
  );
</script>

元素 Element

  • 元素是构成 React 应用的最小单元
  • 元素是你在屏幕上能够看到的东西
  • 可以简单理解为,用标签包裹起来的就是元素
// 元素
const element = <div>huang</div>;

JSX

在 React 中,jsx 是用来声明 React 元素的

// 原生js中
var element = '<h1>hello-world, dada</h1>';
// jsx中
const element = <h1>hello-world, dada</h1>;

ReactDOM.render(
  element,
  document.getElementById('app')
);

1. 嵌入表达式

通过一个大括号

const element = <h1>{ 1 + 2 }</h1>; // 3

2. JSX 属性

// 传递属性为字符串要加上引号
const element = <div name="logo">my logo</div>; // my logo

// 传递属性为变量要加上{}
const data = 'dada'
const element = <div data={data}>huang</div> // huang

JSX 的属性采用驼峰命名:注意一些特殊标签的命名,class 要写成 className,tabindex 要写成 tabIndex

3. 自闭标签

// 没有内容的标签,可以选择自闭
const element = <img src="https://fe.imdada.cn/myosotis/assets/src/home/images/next.png" />

4. JSX 实质

// 以下两段代码是等价的
const element = (
  <h1 className="greeting">Hello, world!</h1>
);

// 编译成对象
const element = React.createElement(
  'h1', // 标签名
  {className: 'greeting'}, // 属性值
  'Hello, world!' // 内容值
);

组件及 props

组件可以将UI切分成一些的独立的、可复用的部件,这样你就只需专注于构建每一个单独的部件。

用函数定义组件

纯展示组件,所有数据都通过外部传入

function Welcome(props) {
  return <h1>Hello</h1>;
}

用 class 定义组件

  • 带状态的组件,组件内部允许有组件自己维护的数据
  • 可以使用生命周期函数
class Welcome extends React.Component {
  state = {
      // 组件内部有自己维护的数据,不供外部使用,它是局部的
      data: 'Hello'
  }
  
  render() {
    return <h1>{ this.state.name }</h1>;
  }
}

组件抽离

  1. 可以组件复用
  2. 可维护性高
  3. 一个逻辑复杂的组件尽量只做一件事
function Comment(props) {
  return (
    <div className="Comment">
      
      <div className="UserInfo">
        <img className="Avatar"
          src={props.author.avatarUrl}
          alt={props.author.name}
        />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      
      <div className="Comment-text">
        {props.text}
      </div>
      
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

// 抽离userInfo
function UserInfo(props) {
  return (
    <div className="UserInfo">
      <img className="Avatar"
        src={props.author.avatarUrl}
        alt={props.author.name}
      />
      <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>
  );
}

props

  1. 顾名思义是指组件的属性
  2. props 是只读的,一定不能(直接)更改 props 的值
const Welcome = props => {
  return <h1>Hi, { props.name }</h1>
}

// name为组件属性
const element = <Welcome name="NewDada" />
ReactDOM.render(
  element,
  document.getElementById('app')
);

// 输出 Hi, NewDada

state 及生命周期

  1. 一个组件需要有自己的状态,需要用到 state
  2. state 是私有的,完全受控于当前组件。
  3. 要使用 state,你需要将函数声明的组件转化为 class 声明的组件

看一个例子:Clock.js

注意:

  1. 不要直接更新 state,只能使用 this.setState 函数进行更新。
  2. 如果你有些内部数据不在 render 函数中使用,请不要放在 state 中。

生命周期

第一次渲染时相关生命周期函数

constructor() {}
componentWillMount() {} // 组件将要挂载
render() {}			        // 渲染
componentDidMount() {} //  组件已经挂载
// 组件将要卸载时调用
componentWillUnmount() {}

组件更新时

componentWillReceiveProps() {}
shouldComponentUpdate() {}
componentWillUpdate() {}
componentDidUpdate() {}

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

上一篇:

下一篇:

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2512 文章
30 评论
82721 人气
更多

推荐作者

瑾兮

文章 11 评论 2

carlo_sn

文章 0 评论 0

15867725375

文章 0 评论 0

a3576419

文章 0 评论 0

wendy

文章 0 评论 0