react组件实例三大属性

1.state属性

        

<script type="text/babel">

        //1.创建组件

        class Weather extends React.Component{

            //初始化状态

            state = {isHot:false,wind:'微风'}

            render(){

                const {isHot,wind} = this.state

                return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>

            }

            //自定义方法————要用赋值语句的形式+箭头函数

            changeWeather = ()=>{

                const isHot = this.state.isHot

                this.setState({isHot:!isHot})

            }

        }

        //2.渲染组件到页面

        ReactDOM.render(<Weather/>,document.getElementById('test'))

                

    </script>

关于react工作的各个方法的次数   

class Weather extends React.Component{

            

            //构造器调用几次？ ———— 1次

            constructor(props){

                console.log('constructor');

                super(props)

                //初始化状态

                this.state = {isHot:false,wind:'微风'}

                //解决changeWeather中this指向问题

                this.changeWeather = this.changeWeather.bind(this)

            }

            //render调用几次？ ———— 1+n次 1是初始化的那次 n是状态更新的次数

            render(){

                console.log('render');

                //读取状态

                const {isHot,wind} = this.state

                return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>

            }

            //changeWeather调用几次？ ———— 点几次调几次

            changeWeather(){

                //changeWeather放在哪里？ ———— Weather的原型对象上，供实例使用

                //由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用

                //类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined

                

                console.log('changeWeather');

                //获取原来的isHot值

                const isHot = this.state.isHot

                //严重注意：状态必须通过setState进行更新,且更新是一种合并，不是替换。

                this.setState({isHot:!isHot})

                console.log(this);

                //严重注意：状态(state)不可直接更改，下面这行就是直接更改！！！

                //this.state.isHot = !isHot //这是错误的写法

            }

        }

props

        

   class Person extends React.Component{

            render(){

                // console.log(this);

                const {name,age,sex} = this.props

                return (

                    <ul>

                        <li>姓名：{name}</li>

                        <li>性别：{sex}</li>

                        <li>年龄：{age+1}</li>

                    </ul>

                )

            }

        }

        //渲染组件到页面

        ReactDOM.render(<Person name="jerry" age{19}  sex="男"/>

        ,document.getElementById('test1'))

props就是组件里传入的一些属性，和属性值可以在 props里得到

        对props的值进行限制 类似于ts

  //对标签属性进行类型、必要性的限制

            static propTypes = {

                name:PropTypes.string.isRequired, //限制name必传，且为字符串

                sex:PropTypes.string,//限制sex为字符串

                age:PropTypes.number,//限制age为数值

            }

            //指定默认标签属性值

            static defaultProps = {

                sex:'男',//sex默认值为男

                age:18 //age默认值为18

            }

            

3.ref

        1.字符串形式的

        <input ref="input1" type="text" placeholder="点击按钮提示数据"/>&nbsp;

        <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;

                                

showData = ()=>{

                const {input1} = this.refs

                alert(input1.value)

            }

        2.回调函数式的

        

        <input ref={c => this.input1 = c } type="text" placeholder="点击按钮提示数据"/>&nbsp;

        <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;

  showData = ()=>{

                const {input1} = this

                alert(input1.value)

            }

3.createRef类型

        class Demo extends React.Component{

                React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”

            myRef = React.createRef()

            myRef2 = React.createRef()

            showData = ()=>{

                alert(this.myRef.current.value);

            }

            showData2 = ()=>{

                alert(this.myRef2.current.value);

            }

            render(){

                return(

                    <div>

                        <input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>&nbsp;

                        <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;

                        <input onBlur={this.showData2} ref={this.myRef2} type="text" placeholder="失去焦点提示数据"/>&nbsp;

                    </div>

                )

            }

        }