react中数据承载
react中数据承载的两种方式：
props: 自己可以设置默认属性，也可以从外部传入属性，但是外部传入的属性，自己只能用，不能用来修改
state: 一般由自己控制，自己可以进行状态的更改。
props
函数组件
函数式组件中：
通过参数props.xxx获取外部传入的属性值
<body>
<div id="app"></div>
<script type="text/babel">
const App = function(props){
return (
<div>
我是app组件！ --- { props.username } --- { props.age+1 } --- {props.sex} --- {props.address}
</div>
)
}
let obj = {
sex:"女"
}
let other = {
address:"贫民窟"
}
ReactDOM.render(<App {...other} sex={obj.sex} username={"张三"} age={10} />,document.getElementById("app"))
</script>
</body>类组件
类组件中：
通过this.props.xxx获取外部传入的属性值
<body>
<div id="app"></div>
<script type="text/babel">
class App extends React.Component{
render(){
let {sex,username,age} = this.props;
return (
<div>
我是app组件！ --- { username } --- { age+1 } --- {sex} --- {this.props.address}
</div>
)
}
}
let obj = {
sex:"女"
}
let other = {
address:"贫民窟"
}
ReactDOM.render(<App {...other} sex={obj.sex} username={"张三"} age={10} />,document.getElementById("app"))
</script>
</body>state
类组件
状态一般放在constructor进行定义，在构造函数中进行初始化
<body>
<div id="app"></div>
<script type="text/babel">
//举例 计数器案例
let a = 1
class Counter extends React.Component{
//状态一般放在constructor进行定义的
constructor(){
super()
this.state = { //状态通常在构造函数中进行初始化
count:1
}
}
handleClick = ()=>{
// this.state.count = this.state.count+1
// this.forceUpdate()
// react中推荐采用setState，就可以实现数据改变，视图更新操作了
// setState方法是异步的，如果想要获取更新后的最新状态，需要写在第二个参数中
// this.setState({
// count: this.state.count+1
// },()=>{
// console.log(this.state.count)
// })
// 这种形式的 setState() 也是异步的，并且在同一周期内会对多个 setState 进行批处理，下方的函数执行了三次，但是结果仍是2
// Object.assign()
/* this.setState({
count:this.state.count+1
})
this.setState({
count:this.state.count+1
})
this.setState({
count:this.state.count+1
}) */
// 如果后续状态取决于当前状态，我们建议使用 updater 函数的形式代替
// 下方的代码会依次执行
// this.setState((prevState)=>{
// return {
// count: prevState.count+1
// }
// },()=>{
// console.log(this.state.count)
// })
// this.setState((prevState)=>{
// return {
// count: prevState.count+1
// }
// })
// this.setState((prevState)=>{
// return {
// count: prevState.count+1
// }
// })
}
render(){
return (
<div>
<p>{this.state.count}</p>
<button onClick={this.handleClick}>更改counter</button>
</div>
)
}
}
class App extends React.Component{
render(){
return (
<div>
<Counter/>
</div>
)
}
}
ReactDOM.render(<App/>,document.getElementById("app"))
</script>
</body>函数组件
在函数组件中，我们可以采用 React 16.8 useState 这个hooks来去同时定义一个状态和一个更改状态的方法
<body>
<div id="app"></div>
<script type="text/babel">
const App = props=>{
//定义了一个状态 count=1
//定义了一个更改状态的方法 setCount
const [count, setCount] = React.useState(1);
const [title,setTitle] = React.useState("hello");
return (
<div>
App --- {count} -- {title}
<p><button onClick={()=>{setCount(count+1)}}>更改count</button></p>
<p><button onClick={()=>{setTitle('你好')}}>更改title</button></p>
</div>
)
}
ReactDOM.render(<App/>,document.getElementById("app"))
</script>
</body>