React基础知识

基本

React 中的组件分为函数组件和类组件
区分的话，简单的组件我们就用函数，如果复杂就用 class;
函数组件：在函数里直接 return 一个组件，props 是第一个参数。
类组件：一些初始化的运行会放到 constctor 里面，constructor 里面必须有一句 super();
数据是 this.state
设置数据 this.setState();
render() 就是用于渲染的函数

把组件渲染到 html 中的API 是 ReactDOM.render(组件, HTML 中的 DOM)

这就是 React 的核心，它的标签是函数(API)，标签的属性是函数的参数

如果在组件中用到其它组件(子组件)，我们可以在父组件的虚拟 DOM 中把自己的函数绑定自身之后传给子组件的 props，子组件在需要的时候调用它，这用就实现了父子组件的通信；

但是如果我们想要同级、爷孙或者其它更复杂的通信呢，这个时候我们就需要有一个“第三方”，可行的思路是，我们在每个组件里面设置可触发的函数，然后在组件外设置一个监听，只要任何一个组件事件触发了，“第三方”就执行、更改响应的数据，把数据从根标签往下在每个组件传送一遍，子组件就会更改需要的地方(DOM diff)

API

Redux 的原理

Redux 算是发布订阅模式的一种变种；

Redux 中有一个重要的概念：
Store: 存数据的东西
reducer: 对于数据的操作
subscribe: 订阅
action: 触发的事件(有 type，payload 两个属性)
state: state 数据
dispatch: 发布事件

在 React 中使用 Redux 的思路是，

1.构建一个 reducer 函数
参数为 state 和 action 用来根据收到的 action.type 调用不同的函数，返回相应的新的 state.
reducer(state, action){}

2.把 reducer 作为参数创建一个 store
let store = Redux.createStore(reducer)

3.根据 react 的组件通信原理，可以把 store 传给子组件；

4.设置订阅：
store.subscribe(fn)
每当 dispatch 一个 action 的时候就会执行作为参数的函数，如果在函数里面放个 render()，就可以重新渲染页面；

5.设置可触发事件的函数
store.dispatch({type: "eventType", payload: "eventPayload"})

上面这个是基本的 React + Redux;
有一个库专门把他两结合起来： react-redux;
区别与 React + Redux 的地方在于，

1.react-redux 提供了一个 Previder 组件，可以把 store 传给它的所有子组件

<Provider store={myStore}> //

2.任何组件想要使用 store 的数据，调用connect(mapStateToProps,mapDispatchToProps)(Son) 函数
其中，mapStateToProps，mapDispatchToProps 都是函数，
mapStateToProps 以 state 作为参数，是获取部分需要的属性；比如，return{ n : state.n}
mapDispatchToProps 根据父组件的 dispatch 时间构建了自己需要的 dispatch 事件组成的 action 对象.
比如，return {add1: ()=> dispatch({type:'add', payload: 1})}
这两者返回的对象都成为 Son 组件中的属性：

3.在子组件中就可以直接使用自己的 state 和 dispatch (this.props.n , this.props.add1)

Context API

redux 自己做出来的这个 context API 是对于 redux 的挑战，功能上很类似，不过使用起来就简单特别多。（redux 本来就不是为了简便而生的，人家觉得“防呆”胜于一切 ……）

使用：

1.let themeContext = React.createContext(); // 创建一个 context;

2.在父组件使用<themeContext.Previder value={this.value}> 组件把值传给子组件；

3.在子组件中，用themeContext.Consumer 组件就可以使用父组件传过来的值；

Hooks API

Hooks 的意义在于 react 的函数组件也可有有状态了，于是，我们是不是不再需要类组件了 ……

使用方法：

1.import 就可以用了
import {useState, useEffect} from "react"

2.语法：函数内部写：
const [count, setCount] = useState(0);
于是，我们就产生了：count 就是值，0 它是初始值，setCount 是用来设置它的函数。

3.于是我们就可以用了：
比如执行 setCount(count + 1) 就可以给 count 加上 1 了.

react-router 库

react-router 库的作用是准确的路由用户到它想去的页面，原理是修改 pathname 并且根据 pathname 来决定显示的组件；

用法：
1.import
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

2.使用：
<Link to="/tab1"> : <Link> 组件，点击会把 pathname 修改为 to 属性的参数；
<Route path="/" exact component={App} /> : <Route> 组件会检测 path,如果 pathname 符合自己的 path 属性，就会显示 App 组件。 exact 的作用是“准确对应”；

其它

React 的生命周期

getDefaultProps: 获取默认属性；
getInialState: 获取每个组件的初始化状态；
componentWillMount: 组件将要被渲染、装载到页面；
render() : 渲染；
componentDidMount: 组件装载到页面；

componentWillReceiveProps: 组件将要接受属性；
shouldComponentUpdate: 是否更新；
componentWillUpdate: 组件将要更新；
componentDidUpdate: 组件已经更新；

componentWillUnmount: 组件将要销毁

在 js 中写 css.

1.styled-components 方案
import styled from 'styled-components';
创建组件的时候就可以直接写 css style 了，语法如下

let App = style.div`
  font-size: 15px;
  text-align: center;
`

2.emotion 方案
1)import:

/** @jsx jsx */
import { jsx } from "@emotion/core";

2）直接在组件内部使用。

return (
    <div
      css={{
        display: "flex",
        alignItems: "center",
        background: theme,
        padding: 10
      }}
    />
  ）