一、环境搭建
在终端安装react：npm install -g create-react-app
新建项目：
create-react-app my-project
cd my-project
yarn start
二、模版语法
App.js :
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
}
export default App;
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
三、PropTypes 与 DefaultProps的应用
PropTypes：首先需引入 import PropTypes from ‘prop-types’;
组件传值时，子组件期望父组件传过来的=的数据类型。
例：
class TodoItem extends Component {
TodoItem.propTypes = {
content: PropTypes.string,
//oneOfType:数字类型或者字符串类型
name: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
}
}
DefaultProps：默认值
TodoItem.defaultProps = {
test: 'hello world'
}
四、Props, State 与 render函数
当组件的state或者props发生改变的时候，render函数就会重新执行。
数据一变，页面就会被重新渲染。
当父组件的render函数被运行时，它的子组件的render都将被重新运行一次。
五、虚拟DOM
第一种方式：
1、state数据
2、JSX 模版
3、数据 + 模版 结合， 生成真实的DOM， 来显示
4、state 发生改变
5、数据 + 模版 结合， 生成真实的DOM，替换原始的DOM
缺陷：
第一次生成了一个完整的DOM片段
第二次生成了一个完整的DOM片段
第二次的DOM替换了第一次的DOM，非常耗性能
第二种方式：
1、state数据
2、JSX 模版
3、数据 + 模版 结合， 生成真是的DOM， 来显示
4、state 发生改变
5、数据 + 模版 结合， 生成真实的DOM，并不直接替换原始的DOM
6、新的DOM（DocumentFragment） 和原始的DOM 做对比，找差异
7、找出input框发生了变化
8、只用新的DOM 中的input 元素，替换掉老的DOM 中的input 元素
缺陷：
性能的提升并不明显
第三种方式：
1、state数据
2、JSX 模版
3、生成虚拟DOM（JS对象，用它来描述真实DOM） （损耗了性能，极小）
4、数据 + 模版 结合， 生成真实的DOM， 来显示
5、state发生变化
6、数据+模版 生成新的虚拟DOM （极大的提升了性能）
7、比较原始虚拟DOM和新的虚拟DOM 的区别，找到区别
8、直接操作DOM，改变内容
优点：
1）性能提升
2）它使得跨端应用得以实现。 React Native
六、React中ref的使用
直接获取DOM 元素，一般情况下不推荐使用。
handleBtnClick() {
this.setState((prevState) => ({
list: [...prevState.list, prevState.inputValue],
inputValue: ''
}), () => { // setState运行后，异步调用这个函数。一般获取DOM 元素就写在该函数中
console.log(this.ul.querySelectorAll('div').length);
})
}
七、React中的生命周期函数
指在某一个时刻组件会自动调用的函数
initialization：初始化
Mounting：组件挂载触发，第一次挂载
componentWillMount: 在组件即将被挂载到页面之前的时刻自动执行。
componentDidMount: 组件挂载到页面之后，自动被执行
componentWillReceiveProps: 一个组件要从父组件接受参数；如果这个组件第一次存在于父组件中，不会执行。如果这个组件已经存在于父组件中，才会执行。
