/

React 入门

React 介绍

初识 React

  1. React 不是一个完整的 MVC、MVVM 框架,其只负责 View 层,MVC 已经不适用于某些场景的开发
  2. React 跟 Web Components 不冲突
  3. React 的特点就是“轻”,数据单向绑定,独立、小巧、快速、创新
  4. 组件化的开发思路,小组件构成大组件,高度可重用

React 应用场景

  1. 复杂场景下的高性能
  2. 重用组件库,组件组合
  3. “懒”,少做无用功

你总是这样轻言放弃的话,无论过多久都只会原地踏步。 —— 多啦 a 梦

前置知识

  1. JS CSS
  2. Sass Compass
  3. Yeoman Grunt Webpack
  4. CommonJS NodeJS
  5. Git GitHub

To Be A Better Engineer

  1. 无论知识有多新、项目有多难,只要来了什么姿势都要上
  2. 没人疼、没人爱,团队中没人可以帮上忙,要学会借助外力,视频、Google、开源项目
  3. 积极要求进步

React 的 JSX 与 Style

官网:React - A JavaScript library for building user interfaces

罐头是 1810 发明出来的,可是开罐器呢,却在 1858 年才发明出来。有时就是这样,重要的东西可能迟来一步,但却一定会到。生活和爱情,都是如此。程序,当然也不例外。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Hello World</title>
<script src="https://unpkg.com/react@latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<style>
.fontcolor {
color: blue !important;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
var Hello = React.createClass({
render: function() {
return <div className="fontcolor">Hello {this.props.name}!</div>;
}
});

class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}

ReactDOM.render(
<div>
<Hello name="World" />
<Welcome name="World" />
</div>,
document.getElementById("root")
);
</script>
</body>
</html>

添加组件属性,有一个地方需要注意:class 属性需要写成 classNamefor 属性需要写成 htmlFor ,这是因为 classfor 是 JavaScript 的保留字。然后,属性名都是驼峰命名法。

正所谓粉末登场,远近起帆,风云更迭,嬉皮而黄,多少聚散于圆缺。

React 组件的生命周期和事件处理

React Components Lifecycle

State and Lifecycle - React

  1. Mounted:React Component 被 render 解析生成对应的 DOM 节点,并在插入浏览器的 DOM 结构的一个过程
  2. Update:一个 mounted 的 React Component 被重新 render 的过程(只有影响了 DOM 结构时才会被改变)
  3. Unmounted:一个 mounted 的 React Component 对应的 DOM 节点被从 DOM 结构中移除的过程

每一个状态都封装了对应的 hook 函数。will and did hook.

React Event Listener

Handling Events - React

class ClickBtn extends React.Component {
handleClick(e) {
e.preventDefault();
console.log("The link was clicked.");
}

render() {
return (
<a href="#" onClick={this.handleClick}>
Click me
</a>
);
}
}

ReactDOM.render(
<div>
<Hello name="World" />
<Welcome name="World" />
<ClickBtn />
</div>,
document.getElementById("root")
);

官方文档值得反复看。

References: