一日新手的React道路案例

在学习react的路上越走越远 之 初识React

一个初始的最简单的小案例
（记录学习过程）

在页面点击事件更改文字的值

学习视频：是视频的地址！（话说应该不涉及侵权把

先引入库：

	<!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-DOM库 -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel库，用于把jsx -> js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

主要代码：

<div id = "box"></div>
<script type="text/babel">
    class TWhether extends React.Component {
        //构造器只调用一次
        constructor(props){
        super(props)
        this.state = {isHot:false,wind:"weifeng"}
        this.demo = this.demo.bind(this)
          //bind生成了一个新的函数，所以this.demo指实例对象
        }
        render() {
            //render调用1+n次
            const{isHot,wind} = this.state
            return <h1 onClick = {this.demo}>今天天气很{this.state.isHot ? '炎热' : '寒冷'},{wind}</h1>
        }

        //demo作为onClick的回调，不是通过实例调用的，而是直接调用，而且局部开启了严格模式，所以demo中的this是undefined
        demo() {
            const isHot = this.state.isHot;
            //状态必须通过setState修改
            console.log(this.state);
            this.setState({isHot:!isHot})
        }
    }
    ReactDOM.render(<TWhether/>,document.getElementById('box'))
    </script>`

老师讲的细但听的也云里雾里，所以这稍作总结（

1、.bind返回了一个新函数，所以使this.demo指实例对象。（为了解决this.demo为undefined的问题）

2、构造器被调用了一次，render被调用了1（首次执行）+ n（点击次数）次，demo()被调用了n次。

3、当在需要更改的对象后再增加一个对象时，新增不会受到影响。

4、改变状态需要使用一个内置API即setState

5、构造器–>初始化状态和解决this指向问题
render–>render里的this是组件实例对象 and 作显示
demo()–>获取state值 and 状态更新

渲染结尾，over.

---

继续前一天的内容

props的基本使用

先直接贴代码了（主要部分的代码）

<script type="text/babel">
    class Person extends React.Component {
        render() {
            const{name,sex,age} = this.props
            return (
                <ul>
                    <li>姓名：{name}</li>
                    <li>年龄：{age + 1}</li>
                    <li>性别：{sex}</li>
                    </ul>
            )
        }
    }

    //对标签属性进行类型，必要性的限制
    Person.propTypes = {
            name: PropTypes.string.isRequired,
            age: PropTypes.number,
            sex: PropTypes.string,
            speak: PropTypes.func,
        }

        // 指定默认标签属性值
    Person.defaultProps = {
        sex:"xxx"
    }
    ReactDOM.render(<Person name = "tom" speak = {speak} age = {10}/>,document.getElementById('box1'))
    ReactDOM.render(<Person name = "tom2" sex = "femal" age = {14}/>,document.getElementById('box2'))
    const p1 = {name:"hey",age:14,sex:"femal"}
    ReactDOM.render(<Person {...p1}/>,document.getElementById('box3'))

    function speak() {
        console.log("woshuohua1l1!"); 
       }
    </script>

然后是简写的最后部分：

<script type="text/babel">
    class Person extends React.Component {
        render() {
            const{name,sex,age} = this.props
            return (
                <ul>
                    <li>姓名：{name}</li>
                    <li>年龄：{age + 1}</li>
                    <li>性别：{sex}</li>
                    </ul>
            )
        }
    }

    //对标签属性进行类型，必要性的限制
    Person.propTypes = {
            name: PropTypes.string.isRequired,
            age: PropTypes.number,
            sex: PropTypes.string,
            speak: PropTypes.func,
        }

        // 指定默认标签属性值
    Person.defaultProps = {
        sex:"xxx"
    }
    ReactDOM.render(<Person name = "tom" speak = {speak} age = {10}/>,document.getElementById('box1'))
    ReactDOM.render(<Person name = "tom2" sex = "femal" age = {14}/>,document.getElementById('box2'))
    const p1 = {name:"hey",age:14,sex:"femal"}
    ReactDOM.render(<Person {...p1}/>,document.getElementById('box3'))

    function speak() {
        console.log("woshuohua1l1!"); 
       }
    </script>

注：props是只读不可写的

---

初学react基本上也是跟着敲的，留档，自看。