React组件

<div className="red"> n </div>
// 相当于
React.createElement("div", {
  className: "red"
}, " n ");


const Welcome = ()=>{
    return(<div>hi</div>)
}
<Welcome name="fanison">Study?<div>Yes</div></Welcome>

// 相当于
var Welcome = function Welcome() {
  return React.createElement("div", null, "hi");
};

React.createElement(Welcome, {
  name: "fanison"
}, "Study?", React.createElement("div", null, "Yes"));

React.createElement

• 如果传入字符串div,会创建一个div
• 如果传入一个函数，则会调用该函数，获取其返回值
• 如果传入一个类，会在类前面加个new，获取一个组件对象，然后调用对象的render方法，获取其返回值。

函数组件

function Welcome(props){
  return <div>Hello,{props.name}</div>;
}

<Welcome name="fanison"/>

类组件

class Welcome extends React.Component{
  render(){
    return <div>Hello, {this,props.name}</div>
  }
}
<Welcome name="fanison"/>

添加 props(外部数据)

• 类组件直接读取属性 this.props.xxx
• 函数组件直接读取参数 props.xxx

function App(){
  return (
    <div className="App">
      Outer
      <Son messageForSon="Middle 你好" />
    </div>
  )
}

class Son extends React.Component {
  render() {
    return (
      <div className="Son">
        Outer传递参数：{this.props.messageForSon}
        <Grandson messageForGrandson="inner 你好"/>
      </div>
    );
  }
}

const Grandson = props => {
  return (
    <div className="Grandson">
      Middle传递参数：{props.messageForGrandson}
    </div>
  );
};

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

添加 state(内部数据)

• 类组件用 this.state读，this.setState 写

• setState会异步更新UI，setState之后，state不会立马改变，立马读state会失败，推荐使用 setState(函数)
• setState({n : state.n + 1})，不推荐 this.setState(this.state)，不建议修改旧 state

• 函数组件用 useState 返回数组，第一项读，第二项写

使用 setN() 更新UI
没有this，一律用函数和变量

class Son extends React.Component{
  constructor() {
    super();
    this.state = {
      n:0
    };
  }
  add(){
    // this.setState({n: this.state.n + 1 });
    // console.log(this.state.n)

    this.setState((state)=>{
      const n = this.state.n + 1
      console.log(n)
      return {n}
    });
  }
  render(){
    return (
      <div className="Son">
        Middle n: {this.state.n}
        <button onClick={()=> this.add()}> +1 </button>
        <Grandson messageForGrandson="inner 你好"/>
      </div>
    );
  }
}

const Grandson = (props)=>{
  const [n,setN] = React.useState(0);
  return(
    <div className="Grandson">
        Inner n: {n}
        <button onClick={()=>setN(n+1)}>+1</button>
    </div>
  );
};

复杂 state

类组件

• 类组件的 setState会自动合并第一层属性
• 不会合并第二层属性，需要使用 Object.assign 或...操作符

class Son extends React.Component{
  constructor() {
    super();
    this.state = {
      n:0,
      m:0,
      user: {
        name: "fanison",
        age: 18
      }
    };
  }
  addN(){
    this.setState({n: this.state.n + 1 });
  }
  addM(){
    this.setState({m: this.state.m + 1});
  }
  changeUser(){
    // m 和 n 不会被置空
    this.setState({
      user:{
        name: "Tom"
        // age 被置空
      }
    })
  }
  render(){
    return (
      <div className="Son">
        Middle n: {this.state.n}
        <button onClick={()=> this.addN()}> n + 1 </button>
        Middle m: {this.state.m}
        <button onClick={()=> this.addM()}> m + 1</button>
        <div>user.name:{this.state.user.name}</div>
        <div>user.age:{this.state.user.age}</div>
        <button onClick={()=>this.changeUser()}>changeUser</button>
        <Grandson />
      </div>
    );
  }
}

合并第二层属性

• 使用 Object.assign

  changeUser(){
    const user = Object.assign({},this.state.user);
    user.name = "Tom";
    this.setState({
      user:user
    });
  }

• 使用...操作符

changeUser(){
  this.setState({
    user:{
      ...this.state.user,
      name: "Tom"
    }
  })
}

函数组件

• 函数组件的 setX 不会合并属性

const Grandson = (props)=>{
  const [state,setState] = React.useState({
    n:0,
    m:0
  })
  return(
    <div className="Grandson">
        Inner n: {state.n}
        <button onClick={()=> setState({n: state.n + 1})}> n + 1 </button>    // m被置空
        Inner m: {state.m}  
        <button onClick={()=>setState({m: state.m + 1})}> m + 1 </button>
    </div>
  );
};

• 使用...操作符

const Grandson = (props)=>{
  const [state,setState] = React.useState({
    n:0,
    m:0
  })

  return(
    <div className="Grandson">
        Inner n: {state.n}
        <button onClick={()=> setState({...state,n :  state.n + 1})}> n + 1 </button>
        Inner m: {state.m}
        <button onClick={()=> setState({...state,m : state.m + 1})}> m + 1 </button>
    </div>
  );
};

• 推荐写法

const Grandson = (props)=>{
  const [n,setN] = React.useState(0);
  const [m,setM] = React.useState(0);
  return(
    <div className="Grandson">
        Inner n: {n}
        <button onClick={()=>setN(n+1)}> n + 1 </button>
        Inner m: {m}
        <button onClick={()=>setM(m+1)}> m + 1 </button>
    </div>
  );
};

绑定事件

• 类组件

class Son extends React.Component{
  addN = ()=> this.setState({ n:this.state.n + 1})
  constructor(){
    this.addN = ()=> this.setState({n: this.state.n + 1})
  }
  addN(){
     this.setState({n: this.state.n + 1})
  }
}

addN 与 this.addN是对象本身的属性，这意味着每个Son组件都有自己的 addN，如果有两个Son，就有两个addN
addN()是对象的共用属性(也就是原型上的属性)，这意味着所有Son组件共用一个addN

React与Vue区别

• 相同点

1. 都是对视图的封装，React是用类和函数表示一个组件，而Vue是通过构造选项构造一个组件
2. 都提供了createElement的XML简写，React提供的是JSX语法，而Vue提供的是模板语法

• 不同点
  React是把HTML放在JS里写
  Vue是把JS放在HTML里写