React基础概念

Posted 2021-02-16 sonwrain

Hello Wrold

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById(‘root‘)
);

通过react渲染一个Hello, world!

JSX

即不是字符串也不是html，而且是一种JS语法扩展

在JSX中可以使用表达式

function formatName(user) {
  return user.firstName + ‘ ‘ + user.lastName;
}

const user = {
  firstName: ‘Harper‘,
  lastName: ‘Perez‘
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById(‘root‘)
);

 Babel会将JSX转换成React.createElement()的方法调用

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  ‘h1‘,
  {className: ‘greeting‘},
  ‘Hello, world!‘
);

元素渲染

在React中元素事实上是普通的对象

将元素渲染到DOM节点中，需要将元素传递给ReacDOM.render()的方法来渲染到页面重

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById(‘root‘));

组件

组件可以将UI切个成独立的可复用的部件，组件从概念上来讲是函数

函数定义

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

类定义组件

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Props是只读属性

生命周期

setState

不能直接更改状态，因为不会重新渲染组件

this.state.comment = ‘Hello‘;

使用setState

this.setState({comment: ‘Hello‘});

但是状态更新是异步的

React可能将多个setState合并成一个setState

第二种形式setState参数接收函数

this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

为了实现同步，我们可以使用Promise封装setState

事件处理

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? ‘ON‘ : ‘OFF‘}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById(‘root‘)
);

class LoggingButton extends React.Component {
  handleClick() {
    console.log(‘this is:‘, this);
  }

  render() {
    // This syntax ensures `this` is bound within handleClick
    return (
      <button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>
    );
  }
}

传递参数

class Popper extends React.Component{
    constructor(){
        super();
        this.state = {name:‘Hello world!‘};
    }
    
    preventPop(name, e){    //事件对象e要放在最后
        e.preventDefault();
        alert(name);
    }
    
    render(){
        return (
            <div>
                <p>hello</p>
                {/* Pass params via bind() method. */}
                <a href="https://reactjs.org" onClick={this.preventPop.bind(this,this.state.name)}>Click</a>
            </div>
        );
    }
}

条件渲染

 if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }