React框架

React提供了很多组件化的js库，用于构建ui。React.js框架用来开发网页，React Native框架用来开发移动应用。

Scoop

scoop是windows的软件包管理工具，太方便了。。
https://scoop.sh/

用scoop装nodejs（包括npm），yarn。

创建React项目

cmd 先装react

npm install create-react-app yarn -g

创建react脚手架

create-react-app 项目名

跑一下试试

yarn start

结点、元素和组件

DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。HTML和XML都是一种树形结构。

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问和操作它们的方法。

html标签作为节点，元素被渲染进html标签，组件是用来返回元素的函数。

假设你的 HTML 文件某处有一个根节点：

<div id="root"></div>

想要将一个 React 元素渲染到该根节点中，只需把它们一起传入 ReactDOM.render()：

const element = <h1>Hello, world</h1>;//这里的元素是dom标签
ReactDOM.render(element, document.getElementById('root'));

React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI。更新 UI 唯一的方式是创建一个全新的元素，并将其传入 ReactDOM.render()。

JSX

JSX，是一个 JavaScript 的语法扩展。可以生成 React “元素”。

一个返回标准格式字符串的js函数：

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

通过JSX生成元素：

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

组件

函数式组件

必须大写字母开头，像定义函数一样定义组件（返回值是元素比如dom标签）：

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

通过JSX生成组件类型标签元素：

const element = <Welcome name="Sara" />;

组件类型标签的属性作为props传递给组件，返回了元素<h1>Hello, {props.name}</h1>, 接着React DOM 将 DOM 高效地更新为 <h1>Hello, Sara</h1>。

class组件

创建 class继承于 React.Component。
组件的生命周期

render()
render()是 class 组件中唯一必须实现的方法。当 render 被调用时，它会检查 this.props 和 this.state 的变化并返回更新后的元素。

构造函数

constructor(props)

如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数。

计时器example 详情

//class组件
class Clock extends React.Component{
//构造方法
constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
//tick方法用来刷新state
tick() {
    this.setState({
      date: new Date()
    });
  }
//设置计时器，每秒tick一下
componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }
//挂载计时器
componentWillUnmount() {
    clearInterval(this.timerID);
  }
//render
render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

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

当<Clock /> 被传给 ReactDOM.render()的时候，React 会调用 Clock 组件的构造函数。因为 Clock 需要显示当前的时间，所以它会用一个包含当前时间的对象来初始化 this.state。我们会在之后更新 state。
之后 React 会调用组件的 render() 方法。这就是 React 确定该在页面上展示什么的方式。然后 React 更新 DOM 来匹配 Clock 渲染的输出。
当 Clock 的输出被插入到 DOM 中后，React 就会调用 ComponentDidMount() 生命周期方法。在这个方法中，Clock 组件向浏览器请求设置一个计时器来每秒调用一次组件的 tick() 方法。
浏览器每秒都会调用一次 tick() 方法。在这方法之中，Clock 组件会通过调用 setState() 来计划进行一次 UI 更新。得益于 setState() 的调用，React 能够知道 state 已经改变了，然后会重新调用 render() 方法来确定页面上该显示什么。这一次，render() 方法中的 this.state.date 就不一样了，如此以来就会渲染输出更新过的时间。React 也会相应的更新 DOM。
一旦 Clock 组件从 DOM 中被移除，React 就会调用 componentWillUnmount() 生命周期方法，这样计时器就停止了。

Treepobear

发布了36 篇原创文章 · 获赞 0 · 访问量 1775

私信关注

React前端脚手架