第五章 JSX 语法
- class 属性改为 className for 属性改为 htmlFor
- jsx 中 javascript 表达式必须要有返回值，使用三元操作符
- 所有的标签必须闭合 input img 等
- react 声明组件时，组件名称第一个字母必须大写
- 解析 html 代码用双括号
- jsx 中内联样式通过 style 属性来定义，驼峰命名法
第六章 React 的数据载体：state props 与 context
state 称为内部状态或局部状态,
props 与 context 则用于在组件间传递数据，props 仅支持逐层传递，而 context 则能够跨级传递，只要在一个组件中定义了 context，这个组件里面的子组件不管跨多少级都可以访问到 context 中的数据，react-redux 的 provider 组件就使用了 context 来传递 store
第七章 reactElement 与组件实例
组件是一个函数或类，它决定了如何把数据变为视图
ReactElement 只是一个普通的对象，它描述了组件实例或 DOM 节点
组件实例是组件类的实例化对象
生命周期
-
constructor()
执行时间：组件被加载前最先调用，并且仅调用一次
作用：定义状态机变量
注意：第一个语句必须是 super（props） -
componentWillMount()
执行时间：组件初始渲染（render()被调用前）前调用，并且仅调用一次
作用：如果在这个函数中调用 setState 改变某些状态机，react 会等待 setState 完成后再渲染 组件
注意：子组件也有 componentWillMount 函数，在父组件的该函数调用后再被调用 -
render()
执行时间：componentWillMount 之后，componentDidMount 之前，
作用：渲染挂载组件
触发条件：（1）初始化加载页面（2）状态机改变 setState ( 3 ) 接收到新的 props（父组件更新）
注意：组件所必不可少的核心函数；不能在该函数中修改状态机 state -
componentDidMount()
执行时间：render 之后被调用，并且仅调用一次
作用：渲染挂载组件；可以使用 refs（备注：React 支持一个特殊的属性，你可以将这个属性加在任何通过 render()返回的组件中。这也就是说对 render()返回的组件进行一个标记，可以方便的定位的这个组件实例。）
注意：子组件也有该函数，在父组件的该函数调用前被调用；如果在该函数中修改某些状态机 state，会重新渲染 render 组件，所以有些组件为减少渲染次数，可以将某些修改状态机的操作放在 componentWillMount 函数中；
如果需要在程序启动显示初始化页面后从网路获取数据，可以将网络请求代码放在该函数中 -
componentWillReceiveProps(nextProps)
执行时间：组件渲染后，当组件接收到新的 props 时被调用；这个函数接收一个 object 参数（新的 props）；props 是父组件传递给子组件的。父组件发生 render 的时候子组件就会调用
作用：渲染挂载组件；可以使用 refs（备注：React 支持一个特殊的属性，你可以将这个属性加在任何通过 render()返回的组件中。这也就是说对 render()返回的组件进行一个标记，可以方便的定位的这个组件实例。）
注意：react 初次渲染时，该函数并不会被触发，因此有时该函数需要和 componentWillMount 或 componentDidMount 组合使用;使用该函数一定要加 nextProps 参数 -
shouldComponentUpdate(nextProps, nextState)
执行时间：组件挂载后（即执行完 render），接收到新的 state 或 props 时被调用，即每次执行 setState 都会执行该函数，来判断是否重新 render 组件，默认返回 true；接收两个参数：第一个是心的 props，第二个是新的 state。
作用：如果有些变化不需要重新 render 组件，可以在该函数中阻拦
注意：该方法在初始化渲染的时候不会调用，在使用 forceUpdate 方法的时候也不会 -
componentWillUpdate()
执行时间：在接收到新的 props 或者 state，重新渲染之前立刻调用，在初始化渲染的时候该方法不会被调用
作用：为即将发生的重新渲染做一些准备工作
注意：不能再该函数中通过 this.setstate 再次改变状态机，如果需要，则在 componentWillReceiveProps 函数中改变 -
componentDidUpdate()
执行时间：重新渲染后调用，在初始化渲染的时候该方法不会被调用
作用：使用该方法可以在组件更新之后操作 DOM 元素 -
componentWillUnmount()
执行时间：组件被卸载前调用，
作用：在该方法中执行任何必要的清理，比如无效的定时器，或者清除在 componentDidMount 中创建的 DOM 元素。
React 组件中 this
- constructor(),render(),componentDidMount(),componentDidUpdate()等其他生命周期函数中的 this 都是组件实例
- 其他地方的 this 都与当前上下文有关，因此在 render 输出的 reactElemnt 中调用其他自定义函数需要绑定 this,当然也可以使用箭头函数
第八章 初识 Redux
action 是一个普通对象，表示将要执行的动作，例如{type:‘increment’}
reducer 描述了 action 如何把 state 转变成下一个 state
store 是个全局对象，将 action 和 reducer 以及 stte 联系在一起
store 有以下职能：
- 维持应用的 state
- 提供 getState()方法获取 state
- 提供 dispatch(action)方法更新 state
- 提供 subscribe(listener)注册监听器
第九章 action 创建函数与 ReduxThunk 中间件
reduxThunk 中间件可以让 action 创建函数先不返回 action 对象，而是返回一个函数，通过这个函数延迟 dispatch 或者只在满足指定条件的情况下 dispatch
import {createStore,applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
const store = createStore(counter,applyMiddleware(thunk));第十一章 使用 react-redux 链接
在所有组件的顶层使用 Provider 组件给整个程序提供 store
ReactDOM.render(
<Provider store={store}>
...
</Peovider>,rootEl);使用 connect()将 state 和 action 创建函数绑定到组件中
export default connect(
state=>({counter:state.counter}),//将state.counter传递给组件的counter属性
ActionCreators//是所有action创建函数的集合，同时为每个action创建函数隐式绑定了dispatch方法，
//因此可以直接通过props调用这个action创建函数
)(Counter);容器组件（Container）和展示组件（Components）
| 展示组件 | 容器组件 | |
|---|---|---|
| 作用 | 描述如何展现（骨架、样式） | 描述如何运行（数据获取、状态更新） |
| 直接使用 Redux | 否 | 是 |
| 数据来源 | props | 监听 Redux state |
| 数据修改 | 从 props 调用回调函数 | 向 Redux 派发 actions |
| 调用方式 | 手动 | 通常由 React Redux 生成 |
原文链接: https://jesse121.github.io/blog/articles/2018/08/15.html
版权声明: 转载请注明出处.