react从零开始(二)

1、组件的组合、嵌套和组件树
我们可以构建新的组件专门负责渲染某块功能
例如:

class Title extends Component{
    render() {
        return (
            <div>
                <h1>从零开始react</h1>
            </div>  
        )
    }
}
class Header extends Component {
    render(){
        const word = "你好,react";
        const className = "color"
        return (
            <div>
                <Title></Title>
                <p>{word}</p>
                <p className={className}>{(()=>{return '你好,react'})()}</p>
            </div>
        )
    }
}

这样就把组件单独列出来了,可以实现对组件的多次复用,自定义组件都必须要用大写字母开头,普通的html标签都用小写字母开头,还可以创建main,footer等组件构建成一个组件树,如下图
在这里插入图片描述
2、事件监听

class Title extends Component{
    handleClickOnTitle() {
        console.log("点击了标题")
    }
    render() {
        return (
            <div>
                <h1 onClick={this.handleClickOnTitle}>从零开始react</h1>
            </div>  
        )
    }
}

react内部帮我们封装了一系列的on的属性,需要为某个元素监听某个事件的时候只需要简单的加上on就可以了,事件属性名都是驼峰命名法, 这些on*的事件监听只能用在普通的HTML的标签上,而不能用在组件标签上

event对象,事件监听函数会自动的传入一个event对象,它具有类似于event.stopPropagation、event.preventDefault等方法

class Title extends Component{
    handleClickOnTitle(e) {
        console.log(e.target)
    }
    render() {
        return (
            <div>
                <h1 onClick={this.handleClickOnTitle}>从零开始react</h1>
            </div>  
        )
    }
}

会在控制台输出下面的内容
在这里插入图片描述
关于事件中的this,react在执行函数的时候,并不是通过对象的方式调用的,而是通过函数调用,直接输出this的话是null或者undefined, 这时候我们可以手动的将实例方法bind到当前实例上

class Title extends Component{
    handleClickOnTitle(e) {
        console.log(e.target);
        console.log(this)
    }
    render() {
        return (
            <div>
                <h1 onClick={this.handleClickOnTitle.bind(this)}>从零开始react</h1>
            </div>  
        )
    }
}

在这里插入图片描述
还可以在bind的时候传入一些参数,这种方式非常常见

3、组件的state和setState
一个组件的显示形态是由它数据的状态和配置参数决定的,state就是用来存储这些数据状态的
如下面的例子

class Main extends Component {
    constructor(){
        super();
        this.state = {isLiked: false}
    }
    handleClickOnLikeButton() {
        console.log(this.state.isLiked)
        this.setState({
            isLiked: !this.state.isLiked
        })
    }
    render() {
      return (
      <div>
              <h2>This is main content</h2>
              <button onClick={this.handleClickOnLikeButton.bind(this)}>
                {this.state.isLiked ? "取消": "点赞"}
              </button>
      </div>
      )
    }
  }

当每次点击的时候通过setState方法改变state内的数据状态实现点赞和取消之间的切换

setState接收对象参数,

setState 方法由父类 Component 所提供。当我们调用这个函数的时候，React.js 会更新组件的状态 state ，并且重新调用 render 方法，然后再把 render 方法所渲染的最新的内容显示到页面上。当修改组件的状态的时候必须使用setState方法,
setState方法接收一个对象或者函数作为参数, 当调用setState方法的时候,并不会立即修改state,而是放到一个更新队列中,稍后会合并到state中,再触发组件更新,
setState方法接收函数作为参数的时候会等待所有state更新完毕之后才会重新进行组件的渲染,而不是每次都渲染,这样我们就不必担心多次setState会带来性能问题

注: 主要跟随react小红书学习
附上小红书链接: http://huziketang.mangojuice.top/books/react/

猜你喜欢