react 中 state 的创建及使用

介绍

react中数据承载两种方式：

• props 一般由外部传入，内部可以设置默认属性，但是不能更改外部传入来的属性
• state 一般由自己控制，自己可以进行状态更改。

state

• 两种创建方式
  1. 通过 class 组件创建
  2. 通过 函数式组件创建

1. 使用 class 创建时使用 state

this.state = {     //通过 this.state定义组件的初始状态
   num:1  
}

this.setState({   //通过`this.setState()`方法实现数据改变，视图重新render渲染
    num:this.state.num+1
})

代码展示：

    <script type="text/babel">
        class App extends React.Component{
            constructor(){
                super()
                this.state = {   //设置初始值
                    content:1
                }
            }
            handleClick = ()=>{
                this.setState({    //修改初始值
                    content:this.state.content+1
                })
            }
            render(){
                return (
                    <div>
                        <p>counter===={this.state.content}</p>   //展示 state 里面的内容
                        <button onClick={this.handleClick}>点击更改</button> {/*调用 handleClick 函数*/}
                        </div>
                )
            }
        }
        ReactDOM.render(<App/>,document.getElementById("app"))
    </script>

效果图：

2. 使用函数式组件定义状态

const [count,setCount] = React.useState(0)   //useState这个Hooks来去解决

• 声明了一个初始化状态count,并且初始值0
• count定义的初始化状态 setCount就是更改count这个状态的方法

<li>{count}</li>    //获取count 的值
<button onClick = {()=>{setCount(count+1)}}>点击更新</button>  //修改 count 的值

代码展示：

    <script type="text/babel">
    const App = ()=>{
        const [count,setCount] = React.useState(0)
        return(
            <div>
                <li>{count}</li>
                <button onClick = {()=>{setCount(count+1)}}>点击更新</button>
            </div>
        )
    }
        ReactDOM.render(<App/>,document.getElementById("app"))
    </script>

效果图：