React.js-2020/04/16 随笔(一)

JSX描述UI信息

JSX是JavaScript语言的一种语法扩展，react.js可以用JSX来描述你的组件，JSX在编译的时候会变成相应的javascript对象描述，

ReactDOM负责把这个用来描述UI信息的JavaScript对象变成DOM元素，并且渲染到面上。

React.js中一切皆组件，一个组件类必须要实现一个render方法，这个方法必须要返回一个JSX元素。

也可以插入JavaScript的表达式，表达式的返回结果也会渲染到页面上，表达式用{}包裹。

在JSX中<div class='xxxx'>是不合法的，新定义为<div className='xxx'/>

同理还有<lable for='xxx'>ABC</lable>,新定义为：<lable htmlFor=''>ABC</lable>

组件的组合，嵌套和数据组件

自定义的组件必须要以大写字母开头，普通的HTML标签都用小写字母开头。

事件监听：react.js不需要手动调用浏览器原生的addEvenListener进行事件监听。它封装好了一系列的on*属性。

even对象：和普通浏览器一样，事件监听会被自动传入一个event对象。React.js中的event对象并不是浏览器提供的，而是它自己内部构建的。它将原生的

　　　　　对象封装了一下，对外提供了API和属性，可以解决兼容性问题。

一般实例方法里面的this指的是实例本身，如果你想在事件函数中使用当前的实例，需要手动的将实例方法bind到当前实例中，再传入给react.js

 

class Title extends Component {
  handleClickOnTitle (e) {
    console.log(this)
  }

  render () {
    return (
      <h1 onClick={this.handleClickOnTitle.bind(this)}>React 小书</h1>
    )
  }
}

 

组件的 setState和State

setState由父类组件Component提供，当我们调用这个方法的时候，会更新组件的状态state，并重新调用render方法。然后再把render方法所渲染的最新内容显示在页面上。

当我们要改变组建的状态时，不能直接用this.state这种方式来修改，一定要使用setState方法，他接受一个对象或者函数作为参数。

 

 配置组件的props

class LikeButton extends Component {
  constructor () {
    super()
    this.state = { isLiked: false }
  }

  handleClickOnLikeButton () {
    this.setState({
      isLiked: !this.state.isLiked
    })
  }

  render () {
    const wordings = this.props.wordings || {
      likedText: '取消',
      unlikedText: '点赞'
    }
    return (
      <button onClick={this.handleClickOnLikeButton.bind(this)}>
        {this.state.isLiked ? wordings.likedText : wordings.unlikedText} 👍
      </button>
    )
  }
}

class Index extends Component {
  render () {
    return (
      <div>
        <LikeButton
          wordings={{likedText: '已赞', unlikedText: '赞'}}
          onClick={() => console.log('Click on like button!')}/>
      </div>
    )
  }
}

 

我们把 likedText 和 unlikedText 这两个参数封装到一个叫 wordings 的对象参数内,然后传入到组件中。上面的组件默认配置我们是通过 || 操作符来实现的。

在React.js中也提供了一种方式defultProps，可以方便的做到默认配置。

static defaultProps = {
    likedText: '取消',
    unlikedText: '点赞'
  }

state的主要作用是用于保存，控制，修改自己的可变状态。state在组件内部初始化，可以被组件自身修改，而外部不能访问也不能修改。

props的主要作用是让使用该组件的父组件可以传入参数来配置该组件。

state是让组件控制自己的状态。props是让外部对组件自己进行配置。

 

 

//函数式组件
const HelloWorld = (props) => {
  const sayHi = (event) => alert('Hello World')
  return (
    <div onClick={sayHi}>Hello World</div>
  )
}

//通过继承Component来实现

class HelloWorld extends Component {
  constructor() {
    super()
  }

  sayHi () {
    alert('Hello World')
  }

  render () {
    return (
      <div onClick={this.sayHi.bind(this)}>Hello World</div>
    )
  }
}

函数式组件的编写方式是一个函数就是一个组件，通过继承来构建的组件是一个类就是一个组件。

但是函数式组件只能接受props而无法像跟类组件一样可以子啊constructor里面初始化state。即函数式组件就是一种只接受props和提供render方法的类组件。

渲染列表数据

const users = [
  { username: 'Jerry', age: 21, gender: 'male' },
  { username: 'Tomy', age: 22, gender: 'male' },
  { username: 'Lily', age: 19, gender: 'female' },
  { username: 'Lucy', age: 20, gender: 'female' }
]

class User extends Component {
  render () {
    const { user } = this.props
    return (
      <div>
        <div>姓名：{user.username}</div>
        <div>年龄：{user.age}</div>
        <div>性别：{user.gender}</div>
        <hr />
      </div>
    )
  }
}

class Index extends Component {
  render () {
    return (
      <div>
        {users.map((user,i) => <User key={1} user={user} />)}
      </div>
    )
  }
}

ReactDOM.render(
  <Index />,
  document.getElementById('root')
)

对于用表达式套数组罗列到页面上的元素加上key属性，这个key元素必须是每个元素唯一的标识，一般来说，key的值可以是后台数据返回的id，因为它是唯一的。