React基础记录
2017-06-06 10:05
330 查看
React基于状态实现对DOM的控制和渲染 (以数据驱动视图的开发方式)
组件状态分为两种:一种是组件间的状态传递,另一种是组件内部状态,这两种状态使用props和state表示
props:组件中的props是一种父级向子级传输数据的一种方式,在组件内部,可以通过this.props获取属性对象
state:state是React组件的一个对象,用户界面会随着state的变化而变化,state只能在组件内部中使用,一般用于组件内部的状态维护,更新组件内部的数据,状态,更新子组件的props;
this.state 获取 this.setState 设置
React允许传入对象,如果对象是一个数组的话,可以直接解析数组
var h1Arr = [<h1>第一个h1</h1>,<h1>第二个h1</h1>,<h1>第三个h1</h1>];
ReactDOM.render(<div>{h1Arr}</div>,
document.getElementById('root')
)
var props = {
name1 : "jack",
name2 : "danny"
};
var HelloWorld = React.createClass({
render:function(){
return (
<div>Hello,{this.props.name1},{this.props.name2}</div>
);
}
});
ReactDOM.render(<HelloWorld {...props}/>,document.getElementById('root'))
组件添加样式:
内联:遵循驼峰命名的方式
外部样式:class是es6的关键字,在es5中是保留关键字,所以需将其修改成className
eg:
var styleObj = {
'color':'red'
};
<div style={{styleObj}}>Hello React <p className="pc">早上好</p></div>
<div style={{color:'red'}}>Hello React <p className="pc">早上好</p></div>
propTypes:类型检测(prop校验),限制文本类型是否为对象或者字符串等等。。。。
propTypes:{
//设定输入的数据为字符串型,isRequired表示不能为空
name:React.PropTypes.string.isRequired
}
例子:
任何可以渲染的东西:数字,字符串,元素或数组(或片段)。
optionalNode: React.PropTypes.node,
React元素
optionalElement: React.PropTypes.element,
你也可以声明prop是某个类的实例。 内部使用的是JS的instanceof运算符。
optionalMessage: React.PropTypes.instanceOf(Message),
你可以通过将它作为枚举来确保你的prop被限制到特定的值。
optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
可以是许多类型之一的对象
optionalUnion: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number,
React.PropTypes.instanceOf(Message)
]),
某种类型的数组
optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
具有某种类型的属性值的对象
optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
采取特定样式的对象
optionalObjectWithShape: React.PropTypes.shape({
color: React.PropTypes.string,
fontSize: React.PropTypes.number
}),
你可以用`isRequired`来连接到上面的任何一个类型,以确保如果没有提供props的话会显示一个警告。
requiredFunc: React.PropTypes.func.isRequired,
任何数据类型
requiredAny: React.PropTypes.any.isRequired,
正在自学中,有错误的地方欢迎大神纠正,感谢~~
组件状态分为两种:一种是组件间的状态传递,另一种是组件内部状态,这两种状态使用props和state表示
props:组件中的props是一种父级向子级传输数据的一种方式,在组件内部,可以通过this.props获取属性对象
state:state是React组件的一个对象,用户界面会随着state的变化而变化,state只能在组件内部中使用,一般用于组件内部的状态维护,更新组件内部的数据,状态,更新子组件的props;
this.state 获取 this.setState 设置
React允许传入对象,如果对象是一个数组的话,可以直接解析数组
var h1Arr = [<h1>第一个h1</h1>,<h1>第二个h1</h1>,<h1>第三个h1</h1>];
ReactDOM.render(<div>{h1Arr}</div>,
document.getElementById('root')
)
延展操作符 "..." 这种方式可以很方便的为组件指定多个属性
...后应该跟一个对象,而且对象的键名应该和this.props.键名一样var props = {
name1 : "jack",
name2 : "danny"
};
var HelloWorld = React.createClass({
render:function(){
return (
<div>Hello,{this.props.name1},{this.props.name2}</div>
);
}
});
ReactDOM.render(<HelloWorld {...props}/>,document.getElementById('root'))
组件添加样式:
内联:遵循驼峰命名的方式
外部样式:class是es6的关键字,在es5中是保留关键字,所以需将其修改成className
eg:
var styleObj = {
'color':'red'
};
<div style={{styleObj}}>Hello React <p className="pc">早上好</p></div>
<div style={{color:'red'}}>Hello React <p className="pc">早上好</p></div>
propTypes:类型检测(prop校验),限制文本类型是否为对象或者字符串等等。。。。
propTypes:{
//设定输入的数据为字符串型,isRequired表示不能为空
name:React.PropTypes.string.isRequired
}
例子:
任何可以渲染的东西:数字,字符串,元素或数组(或片段)。
optionalNode: React.PropTypes.node,
React元素
optionalElement: React.PropTypes.element,
你也可以声明prop是某个类的实例。 内部使用的是JS的instanceof运算符。
optionalMessage: React.PropTypes.instanceOf(Message),
你可以通过将它作为枚举来确保你的prop被限制到特定的值。
optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
可以是许多类型之一的对象
optionalUnion: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number,
React.PropTypes.instanceOf(Message)
]),
某种类型的数组
optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
具有某种类型的属性值的对象
optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
采取特定样式的对象
optionalObjectWithShape: React.PropTypes.shape({
color: React.PropTypes.string,
fontSize: React.PropTypes.number
}),
你可以用`isRequired`来连接到上面的任何一个类型,以确保如果没有提供props的话会显示一个警告。
requiredFunc: React.PropTypes.func.isRequired,
任何数据类型
requiredAny: React.PropTypes.any.isRequired,
正在自学中,有错误的地方欢迎大神纠正,感谢~~
相关文章推荐
- Ruby on rails开发从头来(五十)- ActiveRecord基础(更新记录)
- SQL基础:使用SQL从表中取记录
- WinDbg 调试命令记录二 (基础CLR查看)
- SQL Server 索引基础知识(1)--- 记录数据的基本格式
- Ruby on rails开发从头来(五十二)- ActiveRecord基础(删除记录)
- Ruby on rails开发从头来(四十四)- ActiveRecord基础(创建记录)
- SQL Server 索引基础知识(1)--- 记录数据的基本格式 (转)
- 2009-02-18读书记录:视频教程phplectures——基础
- 2009-03-17读书记录:《Manning iBATIS in Action》第一章:iBATIS基础原理
- ASP。NET基础记录
- Java Media Framework 基础教程(学习JMF中,看到好的中文教程,在这里记录下来)
- [转]SQL Server 索引基础知识(1)--- 记录数据的基本格式
- WinDbg 调试命令记录二 (基础CLR查看)
- 在Java中处理日志记录-Java基础-Java-编程开发
- SQL Server 索引基础知识(1)--- 记录数据的基本格式
- Ruby on rails开发从头来(四十四)- ActiveRecord基础(创建记录)
- Java Media Framework 基础教程(学习JMF中,看到好的中文教程,在这里记录下来)
- HTML学习记录(基础)
- Ruby on rails开发从头来(五十)- ActiveRecord基础(更新记录)
- Ruby on rails开发从头来(五十九)- ActiveRecord基础(预加载子记录)