React的学习记录 (一)

对React也是学习一段时间了，都是从其他的大神博客（例如阮一峰老师的React入门）、购买的React实战书籍，React网络教学视频（填鸭式教学适合什么都不懂的小白）等渠道学习使用的，现在也算是入门了。

学来学去最后发现React的官方文档竟然还没有通读一遍：（

React给的第一个例子是不用jsx语法的，今天菜发现。以下是具体实现

/src
    /js
        like_button.js
    index.html

like_button.js

'use strict'
const e = React.createElement           //React创建React Element 的方法
const Component = React.Component       //React组件类型
class LikeButton extends Component {
    constructor(props) {
        super(props)
        this.state = { liked: false }   //设置初始状态
    }
    
    render() {                          //组件渲染方法，当组件的状态或者props的改变满足渲染条件时，组件会调用render重新渲染组件
        if (this.state.liked) {         //判断状态的属性值。如果有多行语句使用this.state向外取值，可以使用解构赋值来简化部分代码，如(let {liked} = this.state)
            return 'you liked this'     //返回一个文本节点
        }

         //非jsx实现方式
         return e(                      //使用前边保存的构造react element方法创建一个button按钮，第二个对象参数为这个按钮添加了一个click方法，按钮文本为Like(第三个参数)
           'button',
           { onClick: () => this.setState({ liked: true }) },
           'Like'
         )
    }
}

index.html

<!DOCTYPE html>
<html>
    <head>
	  <meta charset="utf-8" />
	  <title></title>
    </head>
    <body>
      <div id='root'></div>
    </body>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin> </script>
//crossorigin html5的新的属性（值为anonymous|use-credentials），用来处理跨域的一些操作，详情请参照MDN的描述
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> 
    <script src="./js/like_button.js"></script>
    <script type='text/javascript'>
        //非jsx实现方式
        //官方栗子将以下的添加到DOM的操作放在了like_button.js的底部，为了这个组件文件作为一个单一组件的纯粹性，我将添加操作调整到了index.html中
    	ReactDOM.render(React.createElement(LikeButton) , document.querySelector('#root'))
    </script>
</html>

React的学习记录 (一)

猜你喜欢