React入门 - React面向组件编程day02

1.模块与组件、模块化与组件化的理解 

1）模块：一个js文件

2）组件：代码和资源的集合(html/css/js/image等等)

3）模块化：应用的js都以模块来编写

4）组件化：应用是以多组件的方式实现

2.React定义组件

1）函数式组件

React渲染页面
1.React解析组件标签，找到了MyComponent组件。
2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，呈现在页面中。

<script type="text/babel">
    // 1.创建函数式组件
    function MyComponent() {
       // 因为babel编译后开启了strict严格模式，阻止this指向window
        console.log(this);//undefined
        return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
     }
    // 2.渲染组件到页面
    ReactDOM.render(<MyComponent />, document.getElementById('test'))
</script>

2）类式组件

React渲染页面

1.React解析组件标签，找到了MyComponent组件

2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。将render返回的虚拟DOM转为真实DOM，随后呈现在页面中

<script type="text/babel">
    // 1.创建类式组件
    class MyComponent extends React.Component {
        // render放在哪？ —— MyComponent的原型对象上，供实例使用
        render() {
           // render中的this指？ —— MyComponent的实例对象(MyComponent组件实例对象)
           console.log('render中的this:', this);
           return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>
        }
    }
    // 2.渲染组件到页面
    ReactDOM.render(<MyComponent />, document.getElementById('test'))
</script>

3.组件实例的三大属性 - - state、props、refs

1）state

1. 理解

1. state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
2. 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

2. 强烈注意

1. 组件中render方法中的this为组件实例对象
2. 组件自定义的方法中this为undefined，如何解决？
   1. 强制绑定this: 通过函数对象的bind()
   2. 箭头函数（下例使用箭头函数）
3. 状态数据，不能直接修改或更新

    <script type="text/babel">
        // 1.创建组件
        class Weather extends React.Component {
            // 初始化状态
            state = { isHot: true, 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>

2）props

1.理解

1. 每个组件对象都会有props(properties的简写)属性
2. 组件标签的所有属性都保存在props中

2.作用

1. 通过标签属性从组件外向组件内传递变化的数据
2. 注意: 组件内部不要修改props数据

    <script type="text/babel">
        class Person extends React.Component {
            constructor(props) {
                // 构造器是否接收props，是否传递给super，取决于是否希望在构造器中通过this访问props
                super(props)
                console.log('constructor', this.props);
            }
            // 对类型进行限制
            static propTypes = {
                name: PropTypes.string.isRequired,
                sex: PropTypes.string,
                age: PropTypes.number,
            }
            // 默认值
            static defaultProps = {
                sex: '男',
                age: 18
            }

            render() {
                const { name, sex, age } = this.props
                return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>性别：{sex}</li>
                        <li>年龄：{age + 1}</li>
                    </ul>
                )
            }
        }

        ReactDOM.render(<Person name="tom" />, document.getElementById('test1'))
    </script>

3）refs

1.理解

组件内的标签可以定义ref属性来标识自己

 1.字符串形式的ref

    <script type="text/babel">
        class Demo extends React.Component {
            showData1 = () => {
                const { input1 } = this.refs
                alert(input1.value)
            }
            showData2 = () => {
                const { input2 } = this.refs
                alert(input2.value)
            }
            render() {
                return (
                    <div>
                        <input ref="input1" type="text" placeholder="点击按钮提示数据" />&nbsp;
                        <button onClick={this.showData1}>点我提示左侧的数据</button>&nbsp;
                        <input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" />
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo />, document.getElementById("test"))
    </script>

2.回调形式的ref

    <script type="text/babel">
        class Demo extends React.Component {
            showData1 = () => {
                const { input1 } = this
                alert(input1.value)
            }
            showData2 = () => {
                const { input2 } = this
                alert(input2.value)
            }
            render() {
                return (
                    <div>
                        <input ref={c => this.input1 = c} type="text" placeholder="点击按钮提示数据" />&nbsp;
                        <button onClick={this.showData1}>点我提示左侧的数据</button>&nbsp;
                        <input ref={c => this.input2 = c} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" />
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo />, document.getElementById("test"))
    </script>

3.createRef创建ref容器（使用多）

    <script type="text/babel">
        class Demo extends React.Component {
            // React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点
            myRef1 = React.createRef()
            myRef2 = React.createRef()

            showData1 = () => {
                alert(this.myRef1.current.value)
            }
            showData2 = () => {
                alert(this.myRef2.current.value)
            }

            render() {
                return (
                    <div>
                        <input ref={this.myRef1} type="text" placeholder="点击按钮提示数据" />&nbsp;
                        <button onClick={this.showData1}>点我提示左侧的数据</button>&nbsp;
                        <input ref={this.myRef2} onBlur={this.showData2} type="text" placeholder="点击按钮提示数据" />&nbsp;
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo />, document.getElementById("test"))
    </script>