react开发简书-笔记-白红宇

1.全局样式引入方式有变化

import { createGlobalStyle } from 'styled-components';

export const Globalstyle = createGlobalStyle` 。。。。。。

2.引入图片方式在style.js文件中引入图片路径后用background:url(${ logoPic })进行引用

import logoPic from '../../statics/logo.png';

export const Logo = styled.aposition: absolute; top:0px; left:0px; display:block; width: 100px; height: 56px; background:url(${logoPic}); background-size: contain;

注解跳转的时候使用

或者在

export const Logo = styled.a.attrs({ href:'/' } )position: absolute; top:0px; left:0px; display:block; width: 100px; height: 56px; background:url(${logoPic}); background-size: contain;

3.设置placeholder中的css

&::placeholder { color: #999; }

4.在dom中需要传参数的时候

onFocus={() => handleInputFocus(list)}

5.所有的在jsx中的方法属性定义的时候可以在render方法中进行结构赋值

render() { const { focused, handleInputFocus, handleInputBlur, list, login, logout } = this.props; }

6.对于使用immutable的数据的时候注意如果需要转换的时候使用 list.toJS(),使用的时候可以以属性的方式调用数据a.b 如果直接使用immutable的数据，则使用a.get('b')

7.对于ref的使用，可以拿到相应的dom元素进行操作

<i ref={(icon) => {this.spinIcon = icon}} className="iconfont spin">

8.一些项目的思想 []在左右float的组件上，父组件添加overflow：hidden，触发子组件的BFC，能够触发感知子组件的宽高 []在进行store的引入中，通常建立index.js文件，其中引入reducer，再暴露给外层使用 []在actionCreators中进行后端数据的ajax请求，如若后端未准备好，可使用本项目中的public路径下的api目录下自己创建json文件来模拟数据 []在state中需要更新多个set数据的话，可以使用state.merge，提高性能，在取state数据的时候使用state.getIn( [ 'header', 'list' ]),取到多层数据 []img标签中需要添加alt属性，避免console中出错

9.在首页的推荐设置变量到样式js中 style.js

export const RecommendItem = styled.divwidth: 280px; height: 50px; background: url(${(props) => props.imgUrl}); background-size: contain;; recommend.js

class Recommend extends PureComponent { render() { return ( { this.props.list.map((item) => { return <RecommendItem imgUrl={item.get('imgUrl')} key={item.get('id')}/> }) } ) } }

10.在store中尽量只有一个出口

index.js中把其他文件都引用进来

import reducer from './reducer'; import * as actionCreators from './actionCreators'; import * as constants from './constants';

export { reducer, actionCreators, constants };

11.回到顶部的功能实现 render.js定义变量showScroll，并绑定事件handleScrollTop

render() { return ( { this.props.showScroll ? 顶部 : null} ) }

handleScrollTop() { window.scrollTo(0, 0); // 跳转到left 0 top 0的位置 } 对showScroll数据的store保存页面端发起action请求，生命周期中绑定事件

componentDidMount() { this.bindEvents(); } componentWillUnmount() { window.removeEventListener('scroll', this.props.changeScrollTopShow); } bindEvents() { window.addEventListener('scroll', this.props.changeScrollTopShow); } 然后在matDispatch中写

const mapDispatch = (dispatch) => ({ changeScrollTopShow() { if (document.documentElement.scrollTop > 100) { dispatch(actionCreators.toggleTopShow(true)) }else { dispatch(actionCreators.toggleTopShow(false)) } } }); actionCreators.js

export const toggleTopShow = (show) => ({ type: constants.TOGGLE_SCROLL_TOP, show }) reducer.js中

const defaultState = fromJS({ topicList: [], articleList: [], recommendList: [], writerList: [], articlePage: 1, showScroll: false });

export default (state = defaultState, action) => { switch(action.type) { case constants.CHANGE_HOME_DATA: return changeHomeData(state, action); case constants.ADD_ARTICLE_LIST: return addArticleList(state, action); case constants.TOGGLE_SCROLL_TOP: return state.set('showScroll', action.show); default: return state; } }

从而store中的数据改变了，页面也就渲染了。

12.使用PureComponent,自动检测自己组件数据是否有变化，有变化才更新自己（shouldComponentUpdate）