React初探 – 组件（state、props、组件嵌套）

使用函数定义组件

函数名就是标签名 返回 jsx模板

    function Simple() {
        return <p>我是一个简单组件</p>
    }

    ReactDOM.render(<Simple/>, document.getElementById("simple"))

当元素被创建之后，就无法改变其内容或属性了，要改变就重新渲染，动态显示时间的例子：

    function Time(props) {
        return (
            <div>
                <h1>Hello, world!</h1>
                <h2>现在是 {props.date.toLocaleTimeString()}.</h2>
            </div>
        );
    }

    function showTime() {
        ReactDOM.render(<Time date={new Date()}/>,document.getElementById("time"))
    }

    setInterval(showTime, 1000);

Es6写法定义组件

类名就是组件标签，类继承自 React 命名空间里的 Component类

    class Complex extends React.Component {
         //构造函数可以不用写
        constructor(props) {
            super(props);
        }
        render() {
            return (<p>我是Es6类写法生生成的组件</p>)
        }
    }

    ReactDOM.render(<Complex/>, document.getElementById("complex"))

state 和 props

可以理解为state和props 都是数据，state对内，props对外。state 和 props 主要的区别在于 props 是不可变的，组件内不能直接修改props，只能在组件的上层修改。也就是父组件通过子组件的props传递给子组件所需要的状态，而 state 可以根据与用户交互来改变，唯一可以分配 this.state 的地方是组件的构造函数，在构造函数外要改变state 通过调用this.setState()。

组件嵌套与传值，在 ReactDOM.render 定义属性的方式传入参数名以及参数，在组件中通过 this.props.属性名 来取值，可以多层 props 来传值。

    /**
     * 用户详细信息组件
     */
    class UserInfo extends React.Component {
        render() {
            return (<div className="userInfo"><p>这是用户详情组件</p><span>姓名:{this.props.username}</span>
                <span>性别:{this.props.gender}</span></div>)
        }


    }

    /**
     * 用户权限信息组件
     */
    class Auth extends React.Component {

        render() {
            return <div className="auth"><p>这是用户权限信息组件</p><span>角色:{this.props.role}</span>
                <span>拥有的权限:{this.props.permission}</span></div>
        }
    }

    /**
     * 用户组件
     */
    class User extends React.Component {
        render() {
            return <div className="user"><p>用户组件</p>
                <UserInfo username={this.props.username} gender={this.props.gender}/>
                <Auth role={this.props.role} permission={this.props.permission}/>
            </div>
        }
    }


    ReactDOM.render(<User username={"wangxiaoming"} gender={"男"} role={"超级管理员"}
                          permission={"所有权限"}/>, document.getElementById("user"));

组件嵌套效果