[JavaScript知识库]React props

基本使用

向组件传递数据，在组件内可以使用props这个对象来调用数据。

类组建

var react = 'react'
        class Person extends React.Component{
            render(){
                console.log(this.props) //hello react
                return <div>
                        <p>{react}</p>
                        <p>{this.props.name }</p>
                    </div>
            }
        }
        ReactDOM.render(<Person name='hello react' />,document.getElementById('app'))

函数组建

function Person2(props){
            console.log(props,'函数组建') //hello web
            return <div>
                
                        <p>{react}</p>
                        <p>{props.name }</p>
                    </div>
        }
        ReactDOM.render(<Person2 name='hello web' />,document.getElementById('app2'))

注意

• props在组件内值是可读的，组件内不能修改props

• 如果props的数据源被修改，那么组件内得到的props数据也会随着修改（数据驱动DOM）

设置props初始值

类组件

class Person extends React.Component{
            static defaultProps = {
                name:'hello react'
            }
            render(){
               return <div>
                    <p>{this.props.name}</p>    
                </div>
            }
        }
        ReactDOM.render(<Person/>,document.getElementById('app'))

在类组件中使用static关键字，给defaultProps 属性定义内容

函数组建

function Person2(props) {
            return <div>
                    <p>{props.name}</p>    
                </div>
        }
        Person2.defaultProps = {
            name:'hello web'
        }
        ReactDOM.render(<Person2/>,document.getElementById('app2'))

在函数组件中，直接给函数名后面添加一个defaultProps属性就可以初始化我们的props值

props.children

        class App extends React.Component{
            render(){
                console.log(this)
                return <div>
                    <p>你好react</p>
                    {this.props.children}  ///h1
                    </div>
            }
        }
        
ReactDOM.render(<App><h1>hello world </h1></App>,document.getElementById('app'))

props 的注意事项

• props 用于传递数据，这个数据是一个单向传递，从根节点组件向它的子孙组件传递，逆向传递是不被允许的

• 子孙组件如果想修改根节点组件的状态，需要根节点组件给子孙组件传递事件方法

事件函数中this问题

• 事件函数中的this 不是我们的组件实例对象 而是undefined

• 在构造器constructor里需要对事件函数进行this绑定，否则函数中的this都是undefine

通过 props.children 属性可以获取到在调用组件时填充到组件标签内的内容

单向数据流

1.react 中关于数据的流动有一条原则，就是单向数据流，自顶向下，从父组件到子组件

2.单向数据流特性要求我们共享数据要放置在上层组件中

3.子组件通过调用父组件传递过来的方法更改数据

4.当数据发送更改时，react会重新渲染组件

5.单向数据流时组件之间的数据流动变得可预测，使定位错位变得简单

class App extends React.Component{
            click(){
                console.log('我来自父组建')
            }
            render(){
                return <div>
                        <h1>父组建</h1>
                        <Child onHaha = {this.click}></Child>
                    </div>
            }
        }
        class Child extends React.Component{
            constructor(){
                super()
                this.fn = this.fn.bind(this)
            }
            fn(){
                console.log('子组建')
                console.log(this)
                this.props.onHaha()
            }
            // <button onClick = {this.props.onHaha}> 事件传递</button>
            render (){
                console.log(this)
                return <div>
                        <h4>子组建</h4>
                        <button onClick = {this.fn}> 事件传递</button>
                    </div>
            }
        }
        ReactDOM.render(<App/>,document.getElementById('app'))