zoukankan      html  css  js  c++  java
  • React组件及其三大属性

    2.React组件及其三大属性

    2.1函数式组件

        function Demo(){
            console.log(this)
            return <h2> 函数式组件</h2>
        }
        // ReactDOM.render(Demo(), document.getElementById('test'))
        ReactDOM.render(<Demo />, document.getElementById('test'))
    

    2.2类式组件

        class MyComponent extends React.Component {
            render(){
                console.log('render中的this: ', this)
                return (
                    <h2>类式组件</h2>
                )
            }
        }
        ReactDOM.render(<MyComponent />, document.getElementById('test'))
    

    2.3使用state属性及简写方式

        class Weather extends React.Component {
    
            // 构造器调用几次? ---------  1次
            constructor(props) {
                super(props);
                // 解决handClick中this的指向, 将this指向绑定到当前实例
                this.handClick = this.handClick.bind(this)
                this.state = {
                    isHot: true,
                    wind: '微风'
                }
            }
    
            // handClick调用几次? ----- 点击一次调用一次
            handClick() {
                // 类中的方法默认开启了严格模式
                // handClick是在Weather类原型上,供实例使用 
                // 由于handClick作为onClick的回调,所以不是通过实例调用,而是直接调用,所以this为undefined
                console.log(this)
                this.setState({
                    isHot: !this.state.isHot
                })
            }
    
            // render调用几次? --- 1+n次
            // 1:初始化一次, n:状态更改就调用
            render() {
                const {isHot, wind} = this.state
                return (
                    <h2 onClick={this.handClick}>今天天气很{isHot ? '炎热' : '凉爽'}, {wind}</h2>
    
                )
            }
        }
    
        ReactDOM.render(<Weather/>, document.getElementById('test'))
    

    state简写方式:

        class Weather extends React.Component {
    
            // state简写方式
            state = {
                    isHot: true,
                    wind: '微风'
                }
    
            // 自定义方法 ----  要用赋值语句的形式+箭头函数
            // 使用箭头函数是因为其内部this会指向外层的this
            handClick = () => {
                console.log(this)
                this.setState({
                    isHot: !this.state.isHot
                })
            }
            render() {
                console.log(this)
                const {isHot, wind} = this.state
                return (
                    <h2 onClick={this.handClick}>今天天气很{isHot ? '炎热' : '凉爽'}, {wind}</h2>
    
                )
            }
        }
    
        ReactDOM.render(<Weather/>, document.getElementById('test'))
    

    2.4 props属性

    基本使用

        class Person extends React.Component {
            constructor(props) {
                // 构造器是否接收props, 是否传递给super,取决于:是否希望在构造器中通过this访问props
                super(props);
                console.log('constructor:', this.props)
            }
    
            render(){
                // console.log(this)
                // 通过结构赋值接收传递参数
                const {name, age, gender} = this.props
                // props是只读的
                // this.props.name = 'jack'  // 报错,只读不可修改
                return (
                    <ul>
                        <li>姓名:{name}</li>
                        <li>性别:{gender}</li>
                        <li>年龄:{age}</li>
                    </ul>
                )
            }
        }
    	// 对标签属性进行类型、必要性的检测
        Person.propTypes = {
            name: PropTypes.string.isRequired,   // 限制name为字符串类型且必填
            gender: PropTypes.string,
            age: PropTypes.number,
            speak: PropTypes.func,
        }
        // 指定默认标签属性值
        Person.defaultProps = {
            gender: '药拐',
            age: 18
        }
    
        ReactDOM.render(<Person age={19} gender="man" speak={speak}/>, document.getElementById('test'))
        ReactDOM.render(<Person name="wiki" age={18} gender="woman"/>, document.getElementById('test1'))
    
        const p = {name: 'jack', age: 18, gender: 'woman'}
        // 通过...运算符解压赋值传递给Person组件
        ReactDOM.render(<Person {...p} />, document.getElementById('test2'))
    

    类的静态属性方式限制:

            // 对标签属性进行类型、必要性的检测
            // static添加类的属性
            static propTypes = {
                name: PropTypes.string.isRequired,   // 限制name为字符串类型且必填
                gender: PropTypes.string,
                age: PropTypes.number,
                speak: PropTypes.func,
            }
            // 指定默认标签属性值
            static defaultProps = {
                gender: '药拐',
                age: 18
            }
    

    函数式组件使用props

    
        function Person(props){
            const {name, age, gender} = props
            return (
                    <ul>
                        <li>姓名:{name}</li>
                        <li>性别:{gender}</li>
                        <li>年龄:{age}</li>
                    </ul>
                )
        }
        ReactDOM.render(<Person name='jerry' age={19} gender="man" />, document.getElementById('test'))
    

    2.5 ref属性

    1.字符串形式:

        class Demo extends React.Component {
            showData = () => {
                const {input1} = this.refs
                alert(input1.value)
            }
            showData2 = () => {
                // 字符串形式通过this.refs获取
                const {input2} = this.refs
                alert(input2.value)
            }
            render(){
                return (
                    <div>
                        <label>
                            <input ref="input1" type="text" placeholder="点击按钮显示数据" />
                        </label>&nbsp;
                        <button  onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
                        <input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点显示数据" />
    
                    </div>
                )
            }
        }
    
        ReactDOM.render(<Demo a="1" b="2" />, document.getElementById('test'))
    

    2.回调函数形式

        class Demo extends React.Component {
            showData = () => {
                // 通过解构赋值取出ref
                const {input1} = this
                alert(input1.value)
            }
            showData2 = () => {
                const {input2} = this
                alert(input2.value)
            }
            render(){
                return (
                    <div>
                        <label>
                                        {/* 将当前事件绑定到this.input1上 */}
                            <input ref={(c) =>{this.input1 = c}} type="text" placeholder="点击按钮显示数据" />
                        </label>&nbsp;
                        <button  onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
                        <input onBlur={this.showData2} ref={(c) =>{this.input2 = c}} type="text" placeholder="失去焦点显示数据" />
    
                    </div>
                )
            }
        }
    
        ReactDOM.render(<Demo />, document.getElementById('test'))
    
    1. createRef的使用
        class Demo extends React.Component {
            /*
                React.createRef调用后可以返回一个容器,该容器可以存储被ref所标识的节点,该容器是“专人专用”的
             */
            myRef = React.createRef()
            myRef2 = React.createRef()
    
            showData = () => {
                console.log(this.myRef.current)
                alert(this.myRef.current.value)
            }
            showData2 = () => {
                console.log(this.myRef2.current)
                alert(this.myRef2.current.value)
            }
            render(){
                return (
                    <div>
                        <label>
                            <input ref={this.myRef} type="text" placeholder="点击按钮显示数据" />
                        </label>&nbsp;
                        <button  onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
                        <input onBlur={this.showData2} ref={this.myRef2} type="text" placeholder="失去焦点显示数据" />
                    </div>
                )
            }
        }
    
        ReactDOM.render(<Demo />, document.getElementById('test'))
    
  • 相关阅读:
    .NetCore Grpc 客服端 工厂模式配置授权
    DOCKER 拉取 dotnet 镜像太慢 docker pull mcr.microsoft.com too slow
    Introducing .NET 5
    VSCode 出现错误 System.IO.IOException: The configured user limit (128) on the number of inotify instances has been reached.
    Omnisharp VsCode Attaching to remote processes
    zookeeper3.5.5 centos7 完全分布式 搭建随记
    Hadoop2.7.7 centos7 完全分布式 配置与问题随记
    MySQL索引 索引分类 最左前缀原则 覆盖索引 索引下推 联合索引顺序
    SQL基础随记3 范式 键
    MySQL调优 优化需要考虑哪些方面
  • 原文地址:https://www.cnblogs.com/guapitomjoy/p/15223285.html
Copyright © 2011-2022 走看看