use react

reactjs.org

1. react基本用法

1. npm install -g create-react-app 安装官方脚手架
2. create-react-app react-demo 初始化

2. 掌握JSX语法 表达式怎么写 样式怎么写

看起来是js和html的混合体,被称之为JSX, 实际核心的逻辑完全是js实现的
import React, { Component } from 'react' 

class Demo extends Component {
    render() {
        return(
            <div>
                <p>demo</p>
            </div>
        )
    }
}
export default Demo

然后根组件引入
import React from 'react'
import ReactDOM from 'react-dom'
import Demo from './Demo'
ReactDOM.render(<Demo/>,document.querySelector('#root'))

3. 状态State和setState

  State 
  setState({})   直接修改
  setState(prev => ({})) 要更新的值与之前的值有依赖的话用这种函数的写法
  
  import React, { Component } from 'react' 
  class Demo extends Component {
      constructor(props) {
          super(props)
          this.state = {
              name: 'jerry',
              count: 0
          }
          setTimeout(() => {
              this.setState({
                  name: 'Tom'
              })
          }, 2000)
          
          this.setState((prevState, prevProps) => ({   
              count: prevState.count + 1
          }), () => {
              console.log(this.state.count)
          })
      }
      render() {
          return (
              <div>
                  <p>{this.state.name}</p>
                  <p>{this.state.count}</p>
              </div>
          )
      }
  }
  我们不能使用this.state.name = 'Tom' 而是需要一个this.setState,设置一个新的state,对数据进行覆盖

4. 组件的两种形式

有状态 跟 生命周期的处理  使用class 的形式
没有 则使用 函数声明的形式  function

5. 组件交互props

   父传子
   ReactDOM.render(<Demo title="React"/>,document.querySelector('#root'))
   
   ····
   
   <h2>{this.props.title}</h2>
   
   儿子如果想跟老爹传值的话 老爹传一个回调函数进去儿子再去调用 这个我们可以称为状态提升

6. 生命周期

reactjs.org/docs/state-…