react-develop-tools安装使用
propTypes和defaultProps
class TodoItem extends Component {
constructor(props){
super(props);
this.handleClick=this.handleClick.bind(this);
}
render(){
const {content,test}=this.props;
return (
<div onClick={this.handleClick}>
{test}-{content}
</div>
)
}
handleClick(){
const {deleteItem,index}=this.props;
deleteItem(index);
}
}
TodoItem.propTypes={
content:PropType.string.isRequired,
content:PropTypea.arrayof
deleteItem:PropTypes.func,
index:PropTypes.number
}
TodoItem.defaultProps={
test:'hello Wolrld'
}
当父组件的render函数运行的时候子组件的render都将被重新执行
虚拟dom
4-5深入了解虚拟dom
优点：
1.性能提升了
2.跨端应用得以实现，react native
虚拟dom的diff算法
比较原始虚拟dom和新的虚拟dom的区别，找到区别
虚拟dom再数据发生改变的时候会去比对，
setState数据发生变化，
同级比较，当数据发生改变会生成新的虚拟dom,做比较，
不一样的话，下面不会比较，对原始dom进行替换，
key值做index会不稳定
key={item},不要用index做key值
react当中的ref使用
ref={{input)=>.{
4-8-react生命周期函数
指的是在某一个时刻组件会自动执行的函数
componentWillMount在组件即将被挂载到页面的时刻自动执行
componentDidMount组件被挂载到页面之后自动被执行
props:
componentWillRecevieProps->shouldComponentUpdated(组件更新之前会被执行，要求返回一个布尔类型的结果）
componentWillUpdate组件被更新之前会自动执行，但是他在shouldComponentUpdate之后执行，如果shouldComponentUpdate返回true他才执行，如果返回false这个函数就不会被执行了
componentWillReceiveProps一个组件从父组件接受参数，只要父组件的render函数被重新执行了，子组件的这个生命周期都会被执行，如果这个组件第一次存在于父组件当中不会执行，如果这个组件之前已经存在于父组件当中，才会执行
componnetWillUnmount当这个组件即将被从页面当中剔除的时候会被执行了
4-9react生命周期函数的使用场景
render函数必须要有，继承自compoennt,默认内置了其他函数的实现
state和props发生变化的时候会重新渲染，
shouldCOmponentUpdate(nextProps,nextState){
if(nextProps.content!==this.props.content){
return true;
}else{
return false;
}
}
这么做render函数会反复执行的
4-10-使用charles进行接口数据模拟
4-11react当中实现css过渡动画
import React,{Component,Fragment} from'react';
class App extends Component {
constructor(props){
super(props);
this.state={
show:true
}
this.handleToggle=this.handleToggle.bind(this);
}
render(){
return (
<Fragment>
<div className={this.state.show?'show':'hide'}>Hello</div>
<button onClick={this.handleCToggle}> toggle</button>
</Fragment>
)
}
handleToggle(){
this.setState({
show:this.state.show?false
})
}
}
css动画效果
.show {
opacity:1;
transition:all 1s ease-in forwards;
}
.hide {
animation: hide-item 2s ease-in;
}
@keyframes hide-item {
0% {
opacity:1;
color:red;
}
50% {
opacity:0.5;
color:green;
}
100% {
opacity:0;
color:blue;
}
}
4-13-使用react-transition-group实现
yarn add react-transition-group
.fade-enter {
opacity:0;
}
.fade-enter-active {
opacity:1;
transition:opacity 1s ease-in;
}
.fade-enter-done {
opacity:1;
}
.fade-exit {
opacity:1;
}
.fade-exit-active {
opacity:0;
transition:opacity 1s ease-in;
}
.fade-exit-done {
opacity:0;
}
<Fragment>
<CSSTransition
in={this.state.show}
timeout={1000}
classNames='fade'
unmountOnExit
onEntered={(el)=>{el.style.color=}}
>
</Fragment>
4-14多个动画
TransitionGroup
第五章redux入门
5-1redux概念简述
redux=reducer+flux
5-2redux的工作流程
调用store.dispatch(action)action就是一个描述发生了什么的普通对象，
Redux 数据的生命周期
Redux 应用中数据的生命周期遵循下面 4 个步骤：
1.调用 store.dispatch(action)
Action 就是一个描述“发生了什么”的普通对象。
2.Redux store 调用传入的 reducer 函数
Store 会把两个参数传入 reducer： 当前的 state 树和 action。然后返回一个新的state
3.根 reducer 应该把多个子 reducer 输出合并成一个单一的 state 树
根 reducer 的结构完全由你决定。Redux 原生提供combineReducers()辅助函数，来把根 reducer 拆分成多个函数，用于分别处理 state 树的一个分支。
4.Redux store 保存了根 reducer 返回的完整 state 树。
这个新的树就是应用的下一个 state！所有订阅 store.subscribe(listener) 的监听器都将被调用；监听器里可以调用 store.getState() 获得当前 state。
现在，可以应用新的 state 来更新 UI。如果你使用了 React Redux 这类的绑定库，这时就应该调用 component.setState(newState) 来更新
yarn add antd
store创建
yarn add redux
5-5action和reducer的编写
action和store转发给reducer
5-6使用redux完成todolist删除功能
5-7-ActionTypes的拆分
5-8使用actionCreator统一创建action
5-9redux知识点复习和补充
store必须是唯一的
reducer是纯函数，store才能改变数据
纯函数：给定固定的输入就一定会有固定的输出
reducer可以接受state但是绝对不能修改state，而不会有任何的副作用
redux的核心api
createStore
storedispatch
store.getState
store.subscribe
第六章redux进阶
6-1ui组件和容器组件
6-2-无状态组件
性能比较高，就是一个函数，
6-4使用redux-thunk进行中间件请求
store只能接受对象，
