yarn add antd;
复习 {React.createElement('a',{href:'http://www.baidu.com'},'Hello')} //标签 属性 子元素 class HelloMessage extends Component{ render(){ let child=React.createElement('li',{className:'ddd'},'我是子页面'); return <div>Hello {this.props.name} {React.createElement('a',{href:'http://www.baidu.com'},'Hello')} <br/> {React.createElement('ul',{className:'ccc'},child )} </div> } } style 属性应该由CSS属性构成的JS对象 * className='' * style={{fontSize:50,backgroundColor:'red'}} // zIndex 多峰命名 let styles={ fontSize:50, fontWeight: 'bold', backgroundColor: 'red', }; {{styles}} 模拟 if {this.state.tags.length === 0 && '等于0'} //A为真返回B renderTags(){ if(this.state.tags.length===0) return <p>里面没有元素</p> return <ul> {this.state.tags.map((tag,index)=><li key={index}>{tag}</li>)} <hr /> </ul> } {this.renderTags()} props 属性 state 组件的状态 可以通过 this.setState进行更改 无状态组件 const Hellos = (props) => <div>Hello {props.name}</div>; <Hellos name={'zhangsan'}/> 有状态组件 //定义一个时间的方法,挂载前开始定时器执行这个方法,卸载后清除挂载前的那个定时器方法 export default class LikeButton extends React.Component { constructor(props) { super(props); //初始化状态 this.state = { data: new Date() } }; componentDidMount(){ this.timerId=setInterval( ()=>this.tick() ) } //方法 tick(){ this.setState({ data:new Date() }) } componentWillUnmount(){ clearInterval(this.timerId); } render() { return <div> <h3>{this.state.data.toLocaleTimeString()}</h3> </div> } } props 对于使用他的组件来说是只读的,只能通过父组件进行修改 state 可以通过 this.setState({ }) 进行修改 注意不要在push pop shift unshift splice 等方法修改 应该用concat slice filter 会放回一个新数组 原生事件 可以再componentDidMount方法中通过addEventListener 绑定浏览器原生事件 componentWillUnmount 方法解除 removeEventListener 在dom 中 设置 ref属性指定一个名称 通过 this.refs.指定名称获取 组合组件 父组件 <Avatar username="pwh" /> const Avatar = (props) => { return ( <div> //子组件 通过属性传递 <ProfilePic username={props.username} /> <ProfileLink username={props.username} /> </div> ); } 循环的时候必须要给key // arr是在父组件里面声明的arr数组的属性 <ul>{this.props.arr.map((v,i)=>{ return <li key={i}>{v}</li> })}</ul> 组件标签里面包含的子元素通过 this.props.children <LikeButton username={'pwh'} arr={[1,2,3,4]}> <span>12123</span> <p>我是一个p标签</p> </LikeButton> props.children通常是一个组件对象的数组,当 props.children是唯一的子元素,那就不是数组 点击事件的内联样式 onClick={ ()=>(console.log(1))} 第二种方法 onClick={this.handleClick} //记得不要再这里带(e)参数 会报错的 <div onClick={this.handleClick.bind(this)}>${this.props.name}</div> handleClick=(e)=>{ console.log(e.target.innerHTML); }; //函数建议使用箭头函数的写法 通过 setState来修改state this.setState({ count: this.state.count+1 }) store有四个方法。 getState： 获取应用当前 state。 subscribe：添加监听器。 dispatch：分发 action。更新 state。 replaceReducer：替换 store 当前用来处理 state 的 reducer。 两者的关系是: state=store.getState() 常用的是dispatch，这是修改State的唯一途径，使用起来也非常简单。 import {createState} from 'redux'; function counter(state=0,action) { switch(action.type){ case 'INCREMENT': return state + 1; case 'DECREMENT': return state-1 default: return state } } let store=createState(counter); store.subscribe(()=>{ console.log(store.getState()); }); store.dispatch({type:"INCREMENT"}); action 唯一的约束仅仅就是包含一个type store由redux的createStore(reducer)生成的 state通过store.getState()获取的 action本质上是一个包含type属性的普通对象 改变 state必须dispatch一个action reducer 本质上action.type 来更新的 实际上state就是所有reducer返回的汇总 redux有五个API createStore(reducer,[]) combineReducers(reducers) applyMiddleware(...middlewares) bindActionCreators(actionCreatore,dispatch) compose(...functions) Redux 强调三大基本原则 * 唯一数据源 * 保持状态只读 * 数据改变只能通过纯函数完成过程总结
创建一个操作指令action ->创建一个reducer -> 通过createStore(reducer) 创建一个store
通过store dispath(action) 执行reducer 中更新操作,更新store中的数据