React_1

时间：April 21, 2021 分类：前端

目录：

Hello World

示例html代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);
</script>

</body>
</html>

这里引入了三个库

  • react.min.js React的核心库
  • react-dom.min.js 提供与DOM相关的功能
  • babel.min.js Babel可以将ES6代码转为ES5代码，这样我们就能在目前不支持ES6浏览器上执行React代码。Babel内嵌了对JSX的支持。通过将Babel和babel-sublime包一同使用可以让源码的语法渲染上升到一个全新的水平。
ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);

以上代码将一个h1标题，插入id="example"节点中，这里使用了JSX，<script>标签的type属性需要设置为text/babel

通过npm启动一个react项目

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ npm config set registry https://registry.npm.taobao.org
$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

修改src/App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>whysdomain</h2>
        </div>
        <p className="App-intro">
          你可以在 <code>src/App.js</code> 文件中修改。
        </p>
      </div>
    );
  }
}

export default App;

元素渲染

<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);
</script>

const element = <h1>Hello, world!</h1>;就是React的元素，使用ReactDOM.render()完成渲染

react的元素是不可变的，更新就需要创建一个新的元素，然后传入到ReactDOM.render()，而在渲染的过程中ReactDOM会对比元素的变化，然后更新变化的部分

<div id="example"></div>
<script type="text/babel">
function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>现在是 {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('example')
  );
}

setInterval(tick, 1000);
</script>

通过setInterval()方法，每秒钟调用一次ReactDOM.render()

也可以创建一个React.Component的ES6类，封装需要展示的元素，这里使用this.props替换props

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>现在是 {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

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

setInterval(tick, 1000);

JSX简介

Jsx是一个js的语法扩展，可以很好的呈现交互的本质形式

优点是

  • JSX执行更快，因为它在编译为JavaScript代码后进行了优化
  • 它是类型安全的，在编译过程中就能发现错误，并默认会进行转义，防止注入

React认为渲染的逻辑本质上与其他UI逻辑内耦合，例如UI中绑定处理事件、在某些时刻状态发生变化时，需要通知到UI，以及在UI展示准备好的数据

JSX用来声明React的元素，和DOM不一样，只是普通对象，通过React渲染之后和浏览器的DOM内容一致

可以将JSX放到一个单独的js文件

helloworld_react.js

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

然后直接饮用js

<body>
  <div id="example"></div>
<script type="text/babel" src="helloworld_react.js"></script>
</body>

JSX可以在花括号里写Js的表达式

ReactDOM.render(
    <div>
      <h1>{1+1}</h1>
    </div>
    ,
    document.getElementById('example')
);

或者

ReactDOM.render(
    <div>
      <h1>{i == 1 ? 'True!' : 'False'}</h1>
    </div>
    ,
    document.getElementById('example')
);

或者使用变量

const name = 'WHY';
const element = <h1>Hello, {name}</h1>;

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

或者函数

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

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

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

样式

var myStyle = {
    fontSize: 100,
    color: '#FF0000'
};
ReactDOM.render(
    <h1 style = {myStyle}>whysdomain</h1>,
    document.getElementById('example')
);

数组

var arr = [
  <h1>whysdomain</h1>,
  <h2>blog.whysdomain.com</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

注释

ReactDOM.render(
    <div>
    <h1>whysdomain</h1>
    {/*注释...*/}
     </div>,
    document.getElementById('example')
);

如果标签没有内容，可以用/>来闭合标签

const element = <img src={user.avatarUrl} />;

JSX在表示对象的时候，Bable会把JSX转译为React.createElement()函数调用

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

和下边的代码一样

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement会做一些检查，然后转化为一个对象

// 注意：这是简化过的结构
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};