JSX 语法

App 组件

function App() {
  return (
    <div className="App">     
      你好 <button>xxx</button>
    </div>
  );
}
export default App;

• 以上代码会被 babel-loader 转换

  function App() {
  return React.createElement('div',              // 元素标签名
                             {className:"App"},  // 元素属性、事件
                             ['你好'，React.createElement('button',{},'xxx')])   // 子元素

  引入组件

  ReactDOM.render(
  <App/>,                            // 等同于 App()
  document.getElementById('root')    // 挂载
  )

  条件判断

  function App() {
  return (
    <div>     
        { n/2 === 0 ? 你好 : <button>xxx</button> } // 三目运算符
    </div>
  );
  }
  export default App;

  循环

  function App(props) {
  return (
    props.numbers.map( (item,index)=>{ 
      return <div key={index}>{index}>item:{item} | index:{index}</div> 
    })
    // 加 div 包裹 需要加 {}
    <div> 
        { props.numbers.map( (item,index)=>{
                     return <div key={index}>{index}>item:{item} | index:{index}</div> 
              }) 
           }
    </div>
  );
  }
  export default App;

  React.Fragment

• React.Fragment 组件能够在不额外创建 DOM 元素的情况下，让 render() 方法中返回多个元素。

• 简写语法：<></>

  render() {
  return (
    <React.Fragment>
        <h2>A heading</h2>
      <div></div>
    </React.Fragment>
  );
  }

  组件

• 返回一个 React 元素的函数或类

  函数组件

  ```javascript function Hello(props) { // Hello 组件 return (

  1
  ) } const Hello = props =>
  1
  // 简写

function App() { // App 组件 return (

<a name="mbWAu"></a>
### 类组件
```javascript
import React from 'react'                   // Hello 组件
class Hello extends React.Component {        
    render() {
         return ( <h1></h1> )
    }
}
class App extends React.Component {          // App 组件      
    render() {
    return ( <div>
                 <Hello />
               </div> 
             )
  }
}

props (外部数据)

函数

function App() {               // App 组件
    return ( <div>
               <Hello name='frank'>你好</Hello>
           </div> 
         )
}
function Hello(props) {        // Hello 组件
    return ( <h1 className={ this.props.name }>{ props.children }</h1> )
}

类

import React from 'react'                    // App 组件
class App extends React.Component {               
    render() {
    return ( <div>
                 <Hello name='frank'>你好</Hello>
               </div> 
             )
  }
}
class Hello extends React.Component {        // Hello 组件
  constructor(props){
      super(props)
  }
    render() {
         return ( <h1 className={ this.props.name }>{ this.props.children }</h1> )  
        // this.props.children 为子组件或 text 的值
    }
}

state (内部数据)

• React 希望不要在旧的数据上更改，而是产生一个新数据替换（函数式理念）

  函数

  function App(props) {
  const [n, setN] = React.useState(0)   // React.useState 返回一个数组，对参数 0 取赋值
  const onClick = () => setN(n + 1)
  return (<h1> n:{n}
    <button onClick={onClick}>+1</button>
  </h1>)
  }

  类

• 调用 setState 才会触发 UI 更新，并且是异步的，所以推荐使用 setState(函数)

  import React from 'react'
  class Hello extends React.Component {
  constructor(props) {
    super(props)
    this.state = {n: 0}
    // 等同于写在这里 this.add = () => { this.setState({n: this.state.n + 1}) }
                                      // 使用箭头函数，因为 this 不可变
  }
  add = () => { this.setState((state) => {n: state.n + 1}) }     
                               //  因为 setState 时异步的，使用函数获取实时的 state
  render() {
    return (<h1> n:{this.state.n}
      <button onClick={this.add}>+1</button>
      // button.onClick.call(null,event)
    </h1>)
  }
  }

  函数式更新

• 如果新的 state 需要通过使用先前的 state 计算得出，那么可以将函数传递给 setState。该函数将接收先前的 state，并返回一个更新后的值。下面的计数器组件示例展示了 setState 的两种用法：

  function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>Reset</button>
      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>  // 获取最新 state
      <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
    </>
  );
  }

• “+” 和 “-” 按钮采用函数式形式，因为被更新的 state 需要基于之前的 state。但是“重置”按钮则采用普通形式，因为它总是把 count 设置回初始值。

• 如果你的更新函数返回值与当前 state 完全相同，则随后的重渲染会被完全跳过。

复杂 state

• 使用 Object.assign 或者 ... 将 state 进行合并

  函数

• 常规写法

  function Hello(props) {        
  const [n,setN] = React.useState(0)
  const [m,setM] = React.useState(0)   
    return ( <h1> n:{ n }
                       <button onClick={ ()=>setN(n+1) }>+1</button>    
                                m:{ m }    
                         <button onClick={ ()=>setM(m+1) }>+1</button>
                     </h1> )
  }

• 函数组件的复杂 state，不会自动合并类，需要手动合并

  function App(props) {
  const [state, setState] = React.useState({n: 0, m: 0})
  return (<h1> n:{ state.n }
    <button onClick={() => setState({...state, n: state.n + 1})}>+1</button>
                         m:{ state.m }
    <button onClick={() => setState({...state, m: state.m + 1})}>+1</button>
  </h1>)
  }

  类

• 类组件的复杂 state，会自动合并第一层

  import React from 'react'
  class Hello extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      n: 0,
      m: 0,
      user:{
        id:1,
        name:'frank'
      }
    }
  }
  change = () => {
    const user = {...this.state.user}
    user.name = 'jack'
    this.setState( {user} )
  }
  render() {
    return (<h1> id:{ this.state.user.id }
                 name:{ this.state.user.name }
              <button onClick={ this.change }>change</button>
            </h1>)
  }
  }

  事件

  函数

  function Hello(props) {        
  const [n,setN] = React.useState(0)   // React.useState 返回一个数组，对参数 0 取赋值
    return ( <h1> n:{ n }
                       <button onClick={ ()=>setN(n+1) }>+1</button>
                     </h1> )
  }

  类

• 4 等同于 3 等同于 1+2 ```javascript class Hello extends React.Component { constructor(props) { super(props); this.state = {n: 0}; 1 this.add = this.add.bind(this); // 为了在回调中使用 this，这个绑定是必不可少的 3 this.add = ()=>{ this.setState({n: this.state.n + 1}) } // 更简洁的写法，箭头函数的 this 不会改变 }

2 add() { this.setState({n: this.state.n + 1}) } 4 add = () => { this.setState({n: this.state.n + 1}) } render() { return (

n:{this.state.n} +1 // button.onClick.call(null,event)