持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第19天，点击查看活动详情

前言

之前的文章学习了jsx语法，大括号表达式，学习了事件绑定，条件/列表渲染。

文章链接在这里：

今天继续学习react的其它知识点。

react语法

props

之前的文章我们的jsx都是用普通的html标签，我们可以使用自定义标签，也就是组件。

它内部可以是html标签，也可以是其它组件，也可以是其它组件+html标签的组合。

下面的HelloWorld就是组件。App也是个组件，HelloWorld相当于它的子组件。

react规定组件首字母必须要大写。如HelloWorld的H

import propTypes from 'prop-types'
function HelloWorld (props) {
  return (
    <div>
      <span>{props.text}</span>
    </div>
  )
}
// 类型定义
HelloWorld.propTypes = {
  text: propTypes.string.isRequired
}

class App extends React.Component {
  render () {
    return (
      < div className="App" >
        <HelloWorld text="hello world" />
      </div>
    )
  }
}

我们可以在App组件里通过属性给HelloWorld传数据，它通过props拿到数据。

然后props是单向数据流，就是你不可以在HelloWorld里面修改props的数据，父组件把修改props的方法传过来，子组件调用来修改props。

function HelloWorld (props) {
  const changeFn = () => {
    props.changeFn('答案cp3')
  }
  return (
    <div>
      <span onClick={changeFn}>{props.text}</span>
    </div>
  )
}

HelloWorld.propTypes = {
  text: propTypes.string.isRequired,
  changeFn: propTypes.func.isRequired
}

class App extends React.Component {
  state = {
    text: 'hello world'
  }

  changeFn = (text) => {
    this.setState({
      text
    })
  }

  render () {
    return (
      < div className="App" >
        <HelloWorld text={this.state.text} changeFn={this.changeFn} />
      </div>
    )
  }
}

点击span后，span的内容会由hello world变成答案cp3。

state

其实上面的例子我已经在app组件定义了state，它也是存储数据的。

它和props的区别是，state是在子组件定义的，一般只可以在子组件上访问。然后可以在子组件更改。

而props不能直接在子组件修改，调用父组件的方法修改，修改后就会更新子组件的数据。

state的修改不要通过赋值去修改，而是通过setState，否则数据不会直接更新。

// ❌
this.state.text = text

// ✅
this.setState({
  text
})

setState的参数除了是对象，也可以是函数。函数的参数是state和props。

state就是上面定义的state属性。 props就是父组件传给子组件的数据。

state = {
  text: 'hello world'
}

// ...省略其它代码

this.setState((state, props) => {
  console.log(state) // { text: 'hello world' }
  return {
    text
  }
})

学习react的语法（3）

前言

react语法

props

state