react慕课网实战项目笔记(初级项目)

<p dangerouslySetInnerHTML={{__html: string}}/>//将字符串变成html可解析型，不推荐，容易产生xss漏洞

 

.bind(this,99,66)//后面加入需要传入的参数

 限制传入的属性:

MyComponent.propTypes = {//在组件类的外面
    属性1：React.propTypes.array,//可传可不传
    属性2：React.propTypes.number.isRequired//必须传入
}

MyComponent.defaultProps = {属性1：值}//设置默认的属性

 ref获取原生节点进行相关操作

<button ref={"button"}>点击一下<button>
//this.refs.button.style.color=blue
//在render之后才能获取到refs

 mixins(es6不推荐)

//不同组件之间共用代码功能
npm install --save react-mixin@2
import ReactMixin from 'react-mixin'
import Mixin from 'Mixin'
//在组件类外，相似限制属性
ReactMixin(MyComponent.protoType,Mixin) 
//使用时
Mixin.log();
附:
const Mixin={
    componentDidMount(){//可以设置自己的生命周期
  }
    log(){
  }
}
export default Mixin;

 内联样式与jsx结合

const style = {
    header: {
        paddingBottom:(this.state.minheader)?"5px":"10px",
    }
}

css模块化

:global(.btn){color:red}//全局可用

标准css转化react的css工具

https://staxmanade.com/CssToReact/

 ant design

npm install antd
import {Button} from 'antd'

 react-router(@3版本，目前最新4有区别)

//定义页
import {Router,Route,hashHistory} from 'react-router'
<Router history={hashHistory}>
    <Route component={Index} path={'/'}>
        <Route component={Details} path={'/details'}></Route>
    </Route>
    <Route component={Footer} path={'/footer'}>
    </Route>
</Router>
//嵌套关系(父组件可以通过this.props.children使用子组件)和平行关系


//使用页
import {Link} from 'react-router'
<Link to={'/'}>链接转移<Link>
<Link to={'/details'}>链接转移<Link>
<Link to={'/footer'}>链接转移<Link>

//参数传递
 <Route component={Footer} path={'/footer/:type'}>
//在Footer组件中就可以通过this.props.parmas.type来使用参数
//可以获取url的参数

 移动端适配

npm install react-responsive
import MediaQuery from 'react-responsive'
<div>
    <MediaQuery query={'(min-device-width:1224px)'}>
        <PCIndex/>
    </MediaQuery>
    <MediaQuery query={'(max-device-width:1224px)'}>
        <MobileIndex/>
    </MediaQuery>
</div>

阻止默认行为

e.preventDefault();
//一般用户阻止button向form提交数据

css超过长度...

whiteSpace:'nowrap'
overflow:'hidden'
textOverflow:'ellipsis'

 优化(雅虎军规35条)

//YSnow插件检测雅虎军规

上拉刷新加载数据

import Tloader from 'react-touch-loader';

 组件库

chart.js
react-toolbox
react-icons