一 在引用css样式表时
不需要使用 from 如：import './XXX.css'
同时因为react中的样式表是共用的 所以在定义id 和className的时要注意唯一性
引入图片时需要这样引入
import ImageS from 'XXX.jpg'
然后在<img src={ImageS}>
二 命名组件的时候必须首字母大写
三 在组件中 函数之间不需要用逗号隔开！
四 重新设置state的方式是
this.setState({
opacity: opacity
});
五 在组件中定义的事件要想在函数中正常使用this 需要对元素节点的this进行绑定
如：
changeBarLen(e){
this.props.changePrograssBarLen(this.refs.fatherNode,e)
}
render() {
return (
<div className='fatherNode' onClick={this.changeBarLen.bind(this)} ref="fatherNode">
）
六 组件嵌套组件
子组件只需要这样写 如：<fatherNode/>
七 关于react大型项目顶层设计思想
一般我们为了方便管理 会设置一个最顶层组件Root 其他组件的共同props 设置在该组件上
如：
let Root = React.createClass({
getInitialState() {
return {
progress: 0,
volume: 0,
isPlay: true,
leftTime: ''
}
}
render() {
return (
<div className="container">
<Logo></Logo>
{React.cloneElement(this.props.children, this.state)}
</div>
);
}
});
let Root = React.createClass({
render() {
return (
<Router history={hashHistory}>
<Route path="/" component={App}>
<IndexRoute component={PlayerPage}/>
<Route path="/list" component={listPage} />
</Route>
</Router>
);
}
});
export default Root;
七 react组件库 antd https://ant.design/index-cn
react中 只要setState里的state变化了就会触发render() 函数 那么函数里的东西就会从新生成
八 在flex布局中 默认flex-direction是row 如果是上中下布局 导航栏和底部已经固定 想要撑开中间内容部分 我们可以改变flex-direction为column 这样中间就自动撑开了！
我们在写react项目时 一般的目录为
src src目录里有view、static、route等子目录 同时有公共组件js文件
其中view目录存放是项目不同的页面 static存放是一些静态资源css 、img等 route存放是路由配置~
九 元素hover增加边框后字体会晃动的解决方法
1.将box-sizing设置为boder-sizing
2.一开始就给它设置边框 只是边框透明 悬浮上去后再加个边框颜色
十 路由带参的方法：如<Route path='/book/:id' component={Book} />
获取参数的方法：this.props.match.params.id
十一 在元素嵌套中div不能嵌套在p标签中 如<p><组件></组件></p> 这样是错误的
十二 单独输出 console.log(this.props) 只能在render() {} 或者其他的函数体内执行
十三 对于要多处使用的重复代码 建议用组件输出
十四 不过过于相信parseInt取整 比如0.0000008用parseInt就会等于8 而不是0 因为parseInt会先将参数转换成字符串 然后进行取整0.0000008会转成科学计数法8e的-7次方 所以就会变成parseInt(8e-7) 变成了8 取整也是会变成1
十五 call() 一般用于改变 this的指向 或者用于继承 如：fn1.call(fn2) 意思是fn2继承了fn1里的属性和方法 并将fn1中的this指向了fn2
Vue数据绑定的简单原理：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
简单的vue数据绑定实现:<input type="text" id="inp" onkeyup="setState()"/>
<p id="showResult"></p>
<script type="text/javascript">
var inp = document.getElementById("inp")
var showResult = document.getElementById("showResult")
var state ={}
//当我们在setState函数中定义state时 就会将state的变量加到defineProperty中
//当对象中的属性值发生改变时 会自动触发defineProperty中封装的set方法 然后我们可以在方法中定义其他observer逻辑！这点跟websocker方法很像
Object.defineProperty(state,"b",{
set:function(newValue){
showResult.innerText = inp.value
},
get:function(){
}
});
function setState(){
state.b = inp.value
}
</script>
</body>
</html>
不需要使用 from 如：import './XXX.css'
同时因为react中的样式表是共用的 所以在定义id 和className的时要注意唯一性
引入图片时需要这样引入
import ImageS from 'XXX.jpg'
然后在<img src={ImageS}>
二 命名组件的时候必须首字母大写
三 在组件中 函数之间不需要用逗号隔开！
四 重新设置state的方式是
this.setState({
opacity: opacity
});
五 在组件中定义的事件要想在函数中正常使用this 需要对元素节点的this进行绑定
如：
changeBarLen(e){
this.props.changePrograssBarLen(this.refs.fatherNode,e)
}
render() {
return (
<div className='fatherNode' onClick={this.changeBarLen.bind(this)} ref="fatherNode">
）
六 组件嵌套组件
子组件只需要这样写 如：<fatherNode/>
七 关于react大型项目顶层设计思想
一般我们为了方便管理 会设置一个最顶层组件Root 其他组件的共同props 设置在该组件上
如：
let Root = React.createClass({
getInitialState() {
return {
progress: 0,
volume: 0,
isPlay: true,
leftTime: ''
}
}
render() {
return (
<div className="container">
<Logo></Logo>
{React.cloneElement(this.props.children, this.state)}
</div>
);
}
});
let Root = React.createClass({
render() {
return (
<Router history={hashHistory}>
<Route path="/" component={App}>
<IndexRoute component={PlayerPage}/>
<Route path="/list" component={listPage} />
</Route>
</Router>
);
}
});
export default Root;
七 react组件库 antd https://ant.design/index-cn
react中 只要setState里的state变化了就会触发render() 函数 那么函数里的东西就会从新生成
八 在flex布局中 默认flex-direction是row 如果是上中下布局 导航栏和底部已经固定 想要撑开中间内容部分 我们可以改变flex-direction为column 这样中间就自动撑开了！
我们在写react项目时 一般的目录为
src src目录里有view、static、route等子目录 同时有公共组件js文件
其中view目录存放是项目不同的页面 static存放是一些静态资源css 、img等 route存放是路由配置~
九 元素hover增加边框后字体会晃动的解决方法
1.将box-sizing设置为boder-sizing
2.一开始就给它设置边框 只是边框透明 悬浮上去后再加个边框颜色
十 路由带参的方法：如<Route path='/book/:id' component={Book} />
获取参数的方法：this.props.match.params.id
十一 在元素嵌套中div不能嵌套在p标签中 如<p><组件></组件></p> 这样是错误的
十二 单独输出 console.log(this.props) 只能在render() {} 或者其他的函数体内执行
十三 对于要多处使用的重复代码 建议用组件输出
十四 不过过于相信parseInt取整 比如0.0000008用parseInt就会等于8 而不是0 因为parseInt会先将参数转换成字符串 然后进行取整0.0000008会转成科学计数法8e的-7次方 所以就会变成parseInt(8e-7) 变成了8 取整也是会变成1
十五 call() 一般用于改变 this的指向 或者用于继承 如：fn1.call(fn2) 意思是fn2继承了fn1里的属性和方法 并将fn1中的this指向了fn2
Vue数据绑定的简单原理：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
简单的vue数据绑定实现:<input type="text" id="inp" onkeyup="setState()"/>
<p id="showResult"></p>
<script type="text/javascript">
var inp = document.getElementById("inp")
var showResult = document.getElementById("showResult")
var state ={}
//当我们在setState函数中定义state时 就会将state的变量加到defineProperty中
//当对象中的属性值发生改变时 会自动触发defineProperty中封装的set方法 然后我们可以在方法中定义其他observer逻辑！这点跟websocker方法很像
Object.defineProperty(state,"b",{
set:function(newValue){
showResult.innerText = inp.value
},
get:function(){
}
});
function setState(){
state.b = inp.value
}
</script>
</body>
</html>