React

jsx
setState
通信
export default context;

React.js 提供了React.js的核心功能代码
ReactDOM 提供了与游览器交互的DOM功能如dom渲染
jsx 需要编译
=======================================
React.createElement(type,props,children)
React.createElement（“header”,{id:”header”},React.createElement(“h1”,null”,hello)）
ReactDOM.render(element,container[, cb])

jsx

<script type="text/babel">
ReactDOM.render(
<section>
<header>
<h1>hello react</h1>
<p>hello</p>
</header>
<srction>,
document.querySelector("#root")
)

class 要写作className style接收的是一个对象，并不是字符串，所有标签名必须是小写
所有标签必须闭合哪怕是单标签
每次输出一个标签（或者包含父级）JSX输出时，必须有唯一的包含父级，如果我们不希望在这个父级中渲染出来，可以使用React.Fragment
为了防止XSS注入攻击 React DOM会在渲染的时候把内容进行转义，所以字符串形式的标签是不会作为HTML标签进行处理

setState

异步 react通常会集齐一批需要更新的组件，然年一次性更新来保证渲染的性能
浅合并 Object.assign()
调用 setState 之后会触发生命周期，重新渲染组件

通信
父->子把数据添加子组件属性中然后子组件从props属性中获取
子->父在父级中定义相关的数据操作方法，把该方法传递给子级
跨组件通信 ```javascript import React,{createContext} from “react” let context = createContext(); let {Consumer,Provider} = context
export default context;
class SubChild extends Component { static contextType = context; render(){
```
console.log(this.context)
```
return (
) } }

//SubChild.contextType = context

<a name="fKGT7"></a>
### 生命周期

- 16.3之前
   - 挂载阶段
      - constructor
      - componentWillMount
      - render
      - componentDidMount
   - 更新阶段
      - 父组件更新引起的组件更新
         - componentWillReceiveProps（nextProps）
         - shoudComponentUpdate(nextProps,nextState)
         - componentWillUpdate(nextProps,nextState)
         - render
         - componentDidUpdate(prevProps,prevState)
      - 组件自身更新
         - shouldComponentUpdate
         - componentWillUpdate
         - render
         - componentDidUpdate
      - 卸载阶段
         - componentWillUnmount
- 现在
   - 挂载阶段
      - constructor
      - static getDerivedStateFromProps（props，state）
         - 注意this
      - render
      - componentDidMount
   - 更新阶段
      - 父组件更新引起的组件更新
         - static getDerivedStateFromProps（props，state）
         - shouldComponentUpdate（）
         - componentWillUpdate（）
<a name="17TNK"></a>
### 受控组件


<a name="qHVCq"></a>
### PureComponent

- 会进行一个浅对比

<a name="PHUcm"></a>
### ref
```javascript
componentDidMount(){
    console.log(this.refs) //组件挂载之后
}
=============================================
import React,{PureComponent,createRef} from "react"
1. wrap = createRef()
2. ref = {this.wrap} => this.wrap.current

children

let {children} = this.props
dangerouslySetInnerHTML
函数式组件
组件的第0个参数是props - 接受父级传递过来的信息组件的return定义该组件需要渲染的内容
没有生命周期，没有this 没有state

React hooks
简化组件逻辑
复用状态略及
无需使用类组件编写

只在最顶层使用hook

function App(){
  // let [状态的值，修改状态的方法] = useState(状态的初始值)
  let [name,setName] = useState("kkb")
console.log(state)
return (<div> 
               <Child/>
        </div>
       )
}

useEffect
- componentDidMount、componentDidUpdate 和 componentWillUnmount 需要清除的副作用
- useEffect(()=>{console.log(“”); return ()=>{log(“卸载”)}},[name])
useRef
- let ageP = useRef(documnet)

router

对于路由组件，router默认传递三个参数
- history 历史记录及路由的一些操作 replace push
- location 获取当前url的一些信息
  - pathname 当前的url
  - search
  - state
- match
  - params 动态路由传递过来的参数
hooks
- useHistory
- userLocation
- userParams
- useRouteMatch

redux

function reducer(state={
    name:"kkb",
  age:9
},action){
  switch(action.type){
    case "edit":
      return {
        ...state,
        name:action.name
      }
  }
    return state
}

//reducer 纯函数用来对state进行管理
let store = createStore(reducer)

store.dispatch({
    type:"edit",
  name:"kkb'
})

store
- dispatch: f dispatch(action) 发起一个修改动作
- getState 获取state
- replaceReducer
- subscribe
纯函数
- 相同的输入永远返回相同的输出
- 不修改函数的输入值
- 不依赖外部环境状态
- 无任何副作用
  - 利于测试
  - 重构 ```javascript function reducer(state={ index:{info:”首页的数据”}, list:{info:”列表页的数据”}, message:{info:”留言也的数据”} },action){

} function index(state={info:”首页数据”},action){ switch(action.type){ case “index_edit_info”: return { info:action.info } } return state; } let reducer = combineReducers({ index, list })

<a name="Owu8b"></a>
### react-redux

- connect()
- useDispatch 获取dispatch
- useStore 获取 store
- useSelect 获取 state
```javascript
import {createStore,combineReducers，applyMiddlyware} from "redux"
import thunk from "redux-thunk"
import reducer from "./reduce"

export default createStore(reducer,applyMiddleware(thunk));

异步

参数是对象，直接调用reducer 修改state
参数是函数，调用该函数，并且把dispatch 和 getState 传递我们的函数

jsx

setState

通信

export default context;

children

dangerouslySetInnerHTML

函数式组件

React hooks

router

redux

异步