【React学习笔记】react组件

组件的两大属性：state props

1. 工厂函数组件

  // 1. 工厂函数组件
        function Simple() {
            return <h2>我是简单组件</h2>
        }
        ReactDOM.render(<Simple/>,document.getElementById("app"))

2. ES6类组件 （复杂组件）

 // 2. ES6类组件 （复杂组件）
        class Complex extends React.Component{
            render(){
                return (
                    <h2>我是复杂组件</h2>
                )
            }
        }
        ReactDOM.render(<Complex/>,document.getElementById("app1"))

注意点：

1. 无论是工厂函数组件还是ES6类组件，函数名或类名首字母都需要大写。
2. return需要有根标签。
3. 标签必须闭合。

state

<script type="text/babel" >
    
        // 2. ES6类组件 （复杂组件） state
        class Complex extends React.Component{
            constructor(props){
                super(props)
                this.state = {
                    msg: "呵呵呵",
                    flag:true
                }
                // this.click = this.click.bind(this)
            }
            // click(){
            //     const {flag}= this.state
            //     this.setState({
            //         flag:!flag
            //     })
            // }

            click = () => {
                const {flag}= this.state
                this.setState({
                    flag:!flag
                })
            }

            render(){
                const {msg,flag} = this.state;
                let res = flag ? '呵呵呵':'哈哈哈'
                return (
                    <div>
                        <h2 onClick={this.click}>{res}</h2>
                    </div>
                )
            }
        }
        ReactDOM.render(<Complex/>,document.getElementById("app"))

    </script>

props

 <script type="text/babel" >
    
        // 2. ES6类组件 （复杂组件） props
        class Complex extends React.Component{
            constructor(props){
                super(props)
            }
          
            render(){
                let {name,age,sex} = this.props
                return (
                    <div>
                        <h2>姓名：{name}</h2>
                        <h2>年龄：{age}</h2>
                        <h2>性别：{sex}</h2>
                    </div>
                )
            }
        }

        let person = {
            name: '张三三',
            sex: '男',
            age: 19
        }

        // 验证类型
        Complex.propTypes = {
            name:PropTypes.string.isRequired
        }
        Complex.defaultProps = {
            sex:'男',
            age:18
        }

        ReactDOM.render(<Complex {...person} />,document.getElementById("app"))

    </script>

组件refs属性以及组件之间的传值

 <script type="text/babel" >
        class Add extends React.Component{
            add = () => {
                // console.log(this.input.value)
                // console.log(this.props.allAdd)
                this.props.allAdd(this.input.value)
                this.input.value=''
              
            }
            render(){
                console.log(this.props)
                return(
                    <div>
                        <input type="text" ref={(input)=>{this.input=input}} />
                        <button onClick={this.add}>add#3</button>
                    </div>
                )
            }
        }
        class List extends React.Component{
            render(){

                console.log(this.props)
                const {list} = this.props
                return(
                    <div>
                        <ul>
                           {
                               list.map((v,i) => {
                                    return <li key={i}>{v}</li>
                               })
                           }
                        </ul>
                    </div>
                )
            }
        }
        class App extends React.Component{
            state = {
                list:[
                    '吃饭',
                    '睡觉',
                    '打游戏',
                ]
            }
            add = (value)=> {
                // console.log(value)
                const {list} = this.state
                list.unshift(value) //unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
                this.setState({
                    list
                })
            }
            render(){
                const {list} = this.state
                return(
                    <div>
                        <Add allAdd={this.add}/>
                        <List list={list}/>
                    </div>
                  
                )
            }
        }

        ReactDOM.render(<App/>,document.getElementById('app'))
    </script>