一、环境搭建

在终端安装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: 组件挂载到页面之后，自动被执行   

image

componentWillReceiveProps: 一个组件要从父组件接受参数；如果这个组件第一次存在于父组件中，不会执行。如果这个组件已经存在于父组件中，才会执行。