React学习总结（二）

state

在类组件中，用 state 来存储当前组件中的数据，类似于vue中的data；而两者不同的是vue中的data可以直接进行修改，而React中的state却不能直接修改,因为直接修改不会重新渲染组件；如果要修改state 则需要使用setState方法；如下面的代码我们利用state实现了类似时钟的效果；

  <script type="text/babel">
    // 正确的使用 State 1,不能直接修改 State 直接修改不会重新渲染组件
    class Clock extends React.Component {
      constructor(props) {
        super(props)
        this.state = { date: new Date() }
      }
      componentDidMount() {
        this.timerID = setInterval(() => this.trick(), 1000)
      }
      componentWillUnmount() {
        clearInterval(this.timerID)
      }
      trick() {
        this.setState({
          date: new Date()
        })
      }
      render() {
        return (
          <div>
            <h1>Hello, world!</h1>
            <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
          </div>
        )
      }
    }
    ReactDOM.render(
      <Clock />,
      document.getElementById('root')
    )
  </script>

事件处理

以下代码实现了一个点击按钮时切换按钮显示的内容的功能

 class Toggle extends React.Component {
      constructor(props) {
        super(props);
        this.state = { isLogin: true };
        this.handleClick = this.handleClick.bind(this)
      }
      handleClick() {
        this.setState(preState => ({
          isLogin: !preState.isLogin
        }))
      }
      render() {
        return (
          <button onClick={this.handleClick}>
            {this.state.isLogin ? 'ON' : 'OFF'}
          </button>
        )
      }
    }

注意以上代码如果我们将第五行的代码注释掉，那么当我们点击按钮时，就会报错；这是为什么呢？我们此时就要想想 this指向的问题了，当我们将按钮渲染到 html 后，函数handleClick的this指向的是调用它的元素也就是button，而button中没有state所以会报错；我们就需要通过bind改变handleClick函数中的this指向，使其始终指向所在的类组件中；这是第一种方法，我们也可以通过将handleClick写成箭头函数的形式，也可以解决这个问题

条件渲染与列表渲染

React中没有类似vue中的指令（v-if,v-for）那么它怎么实现条件和列表渲染呢？

条件渲染

组件可通过props传过来的不同值来展示不同的元素，以下代码实现了登录与未登录时显示的两个不同页面

 function Success(props) {
      return <h1>欢迎</h1>
    }
    function Fail(props) {
      return <h1>请先登录</h1>
    }
    function Greeting(props) {
      let status = props.status
      if (status) {
        return <Success />
      }
      return (
        <div>
          <Fail />
          <button onClick={()=> {status = !status}}>登录</button>
        </div>
      )
    }
    ReactDOM.render(
      <Greeting status={false} />,
      document.getElementById("root")
    )

列表渲染

通过接收到props传过来的数据进行map的方法，来对数据进行遍历渲染，渲染的代码必须写在 {} 内；注意遍历时一定要给元素添加一个key；key 里面的值必须为数据中各子元素特有的 如 id 等；否则会有警告出现；下面给出列表渲染实例代码

function ListItem(props) {
      return (
        <li>{props.number}</li>
      )
    }
    function NumberList(props) {
      const numbers = props.number
      return (
        <ul>
          {numbers.map((numbers) => {
            return <ListItem key={numbers.toString()} number={numbers} />
          })}
        </ul>
      )
    }
    const numbers = [1, 2, 3, 4, 5];
    ReactDOM.render(
      <NumberList number={numbers} />,
      document.getElementById("root")
    )

这次就先分享到这，接下来会分享，表单，状态提升，还有受控组件与非受控组件；