React 基础应用
2019-06-13 本文已影响0人
孔先生你好
一、React 的历史和现状
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。
https://2018.stateofjs.com/cn/front-end-frameworks/react/
二、安装
在网站中引入 React（script引入）
<!-- ... 其它 HTML ... -->
<!-- DOM 容器 -->
<div id="app"></div>
<!-- 加载 React。-->
<!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- 加载babel，以使用JSX-->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- 加载我们的 React 组件。-->
<script src="like_button.js"></script>
</body>
引入的库：React.js、React-dom.js、babel.js(for JSX)
-
ReactDom.render渲染元素 -
React.createElement创建元素 -
React.Component定义组件 - JSX 不是必须，JSX 元素是
React.createElement(component,props, ...children)的语法糖
npm引入（推荐）
npx create-react-app my-app
cd my-app
npm start
三、核心概念
3.1 Hello World
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
3.2 JSX 简介
- 可大括号内放置任何有效的 JavaScript 表达式
- 建议：将 JSX 拆分为多行，同时将内容包裹在括号中
- VSCode 设置 JSX 自动填充（仅限 .js 文件）
3.3 元素渲染
- 元素是构成 React 应用的最小砖块。
- React DOM 会将元素和它的子元素与它们之前的状态进行比较，并只会进行必要的更新来使 DOM 达到预期的状态。
3.4 组件 & Props
- 函数组件
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
- class 组件
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
注意： 组件名称必须以大写字母开头。
React 会将以小写字母开头的组件视为原生 DOM 标签。例如，<div /> 代表 HTML 的 div 标签，而 <Welcome /> 则代表一个组件，并且需在作用域内使用 Welcome。
Props 的只读性：所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。
3.5 State & 生命周期
- 构造函数是唯一可以给
this.state赋值的地方：
constructor(props) {
super(props);
this.state = {
posts: [],
comments: []
};
}
- 不要直接修改 State
this.setState({ comments: ['aaa','bbb'] })
- State 的更新可能是异步的
this.setState((state, props) => ({
counter: state.counter + props.increment
}));
- State 的更新会被合并（浅合并）
image.png
3.6 事件处理
- React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同:
传统的 HTML：
<button onclick="clickHandler()">点我</button>
在 React 中略微不同：
<button onclick={clickHandler}>点我</button>
3.7 条件渲染
3.8 列表 & Key
3.9 表单
3.10 状态提升
3.11 组件 vs 集成
3.12 React 哲学
四、深入了解组件
概览
React 的组件可以定义为 class 或函数的形式。class 组件目前提供了更多的功能，这些功能将在此章节中详细介绍。如需定义 class 组件，需要继承 React.Component：
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
组件的生命周期
http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
其他API
- setState()
- forceUpdate()
class 属性
- defaultProps
- displayName
实例属性
- props
- state
