props
- props是react中一个重要的属性 是组件对外的接口 我们props就可以从组件的外部向组件的内部进行数据的传递
- 也可以完成父组件向子组件的数据传递
- 注意：无论是无状态组件还是类组件 我们都不能修改自身的props
props在无状态组件中基础使用
<div id="demoReact"></div>
<script type="text/babel">
function Com(props){
return(
<div>我是一个无状态组件----外部传递的数据是：{props.text}-----{props.num}</div>
)
}
// let demo="我是数据";
let obj={
text:'我是数据',
num:'我是num'
}
ReactDOM.render(<Com {...obj}/>,document.getElementById('demoReact'));
</script>
props在类组件中基础使用
<div id="demoReact"></div>
<script type="text/babel">
class Com extends React.Component{
render(){
return(
<div>
我是类组件----{this.props.name}------{this.props.num}
</div>
)
}
}
let obj={
name:'sx',
num:'111',
}
ReactDOM.render(<Com {...obj}/>,document.getElementById('demoReact'));
</script>
props的验证和默认值
- 无状态
<div id="demoReact"></div>
<script type="text/babel">
// 1.无状态组件的props验证和默认值
//默认值需要defaultProps
function Com(props){
// props.name=props.name||"我是默认值";
return(
<div>我是无状态组件-------{props.name}----{props.age}</div>
)
}
Com.defaultProps={
name:"我是name的默认值",
}
// 如果是15X版本react 那么我们可以使用同||的方式来完成
// function Com(props){
// props.name=props.name||"我是默认值";
// return(
// <div>我是无状态组件-------{props.name}</div>
// )
// }
// props验证--验证传递进来的数据是否符合我们期望的类型或者要求， 上线模式中请取消props验证
// 1.引用props-types库 npm i --save props-types
Com.propTypes={
name:PropTypes.number,//验证name这个props传递进来的数据必须是number类型
age:PropTypes.number.isRequired//是否为number切不能为空
}
let num=9847;
let age=11;
// ReactDOM.render(<Com name="我是name的数据" />,document.getElementById('demoReact'));
ReactDOM.render(<Com name={num} age={age} />,document.getElementById('demoReact'));
</script>
- 类组件
<div id="demoReact"></div>
<script type="text/babel">
//2.类组件的props默认值和props验证
// 1.默认值 defaultProps
class Com extends React.Component{
static defaultProps={
name:"我是第二种设置默认值的写法"
}
render(){
return(
<div>我是类组件-------{this.props.name}</div>
)
}
}
// Com.defaultProps={
// name:'我是默认值'
// }
// // 2.props验证
// Com.propTypes={
// name:PropTypes.number
// }
let nametext=111;
ReactDOM.render(<Com name={nametext} />,document.getElementById('demoReact'));
ReactDOM.render(<Com />,document.getElementById('demoReact'));
</script>
<mark>使用props实现案例：点击标题，列表消失，再次点击，出现</mark>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="node_modules/babel-standalone/babel.js"></script>
<script src="node_modules/prop-types/prop-types.js"></script>
</head>
<body>
<div id="demoReact"></div>
<script type="text/babel">
//当点击页面的标题时，下面内容隐藏，点击之后再次显示
let bool=true;//控制变量用来保存当前的内容显示和隐藏的状态
let MyCom=(props)=>{
return (
<div style={{display:bool===true?"block":'none'}}>
{props.arr.map((v,i)=>{
return <p key={i}>{v}</p>
})}
</div>
)
}
let dataArr=['1','2','3'];
let Com=()=>{
return(
<div>
<h1 onClick={()=>{bool=!bool;console.log(bool);render();}}>数字展示</h1>
<MyCom arr={dataArr}/>
</div>
)
}
function render(){
ReactDOM.render(<Com />,document.getElementById('demoReact'));
}
render();
</script>
</body>
</html>
state
state 和props的区别
- props是组件对外的接口 state是组件对内的接口
- 组件内可以引用其他组件 组件之间的引用就形成了一个树状的接口 如果下层组件需要使用上层组件的数据层组件就可以通过下层组件的props来进行数据的传递 因此props就是组件对外的接口
- 组件除了使用上层传递的数据之外 它自身也可能有需要管理的数据 这个对内管理数据的属性就是state
主要区别：
- state是可变的
- props对于当前页面的组件来说 他是只读的 如果我们想修改props中的数据 那么我们修改传递给当前组件数据的父组件中的内容
<mark>注意：</mark>
react中我们开发者只需要关心的是数据 当数据改变的时候页面就会自动地发生改变 状态等同于页面中的数据 状态/数据改变了--页面中对应的数据绑定内容就会被react自动地进行改变 声明式渲染--一切的数据改变操作都不用我们关心，只需要我们声明数据react就会自动地对于数据进行相对应的改变
如果我们想使用状态，那么不能使用无状态组件
<mark>state基础使用</mark>
<div id="demoReact"></div>
<script type="text/babel">
class Com extends React.Component{
//在ES6中不管写不写constructor 在new实例的时候都不会上constructor
// 我们可以不写 但是如果我们写了constructor之后就必须在其中写上super()就是指向父类的构造方法
constructor(props){
//如果想在constructor中使用props，那么super中必须写上props
super(props)
// 定义state
this.state={
name:'xx',
age:18
}
}
render(){
return(
// this.setState({key:newValue}); 异步 react就会自动触发render进行数据的渲染
<div>
<button onClick={()=>{this.setState({name:"hh"})}}>点击修改state</button>
<div>我是一个组件{this.state.name}------{this.state.age}</div>
</div>
)
}
}
ReactDOM.render(<Com />,document.getElementById('demoReact'));
</script>
<mark>小案例：使用state，进行点击改变内容</mark>
注意： this.setState()是异步的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="node_modules/babel-standalone/babel.js"></script>
<script src="node_modules/prop-types/prop-types.js"></script>
</head>
<body>
<div id="demoReact"></div>
<script type="text/babel">
class Com extends React.Component{
constructor(props){
super(props);
this.state={
name:'xx',
newHtml:"<p>我是state的内容</p>"
}
}
func=()=>{
this.setState({
name:"haha"
},()=>{
console.log(this.state.name)
})
console.log(this.state.name)
}
render(){
return(
<div>
<button onClick={this.func}>点击我修改</button>
{this.state.name}
<div>{this.state.newHtml}</div>
<div dangerouslySetInnerHTML={{__html:this.state.newHtml}}></div>//用来渲染带有标签的字符串
</div>
)
}
}
ReactDOM.render(<Com />,document.getElementById('demoReact'));
</script>
</body>
</html>
此图是上面代码的运行结果图，对照几处console.log()不难看出this.setState()是异步的，如果想要输出修改过的结果，可以使用回调函数，如上述代码
京公网安备 11010502036488号