react

前端仔ing......

react在es6语法下定义自己的组件：组件的元素都是用html语法。

class Welcome extends React.Component {
  render() {
    return <h1>Hello World!</h1>;
  }
}

然后这样用：

const element = <Welcome />;

ReactDOM.render(
  element,
  document.getElementById('vimi'),
);

注意，原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头，比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错。

函数模式：

function HelloMessage(props) {
    return <h1>Hello World!</h1>;
}
 
const element = <HelloMessage />;
 
ReactDOM.render(
    element,
    document.getElementById('example')
);

parse argsment to class shuld use: && life page

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.name = props.name;
    this.state = {date: new Date()};
  }
 
  componentDidMount() {
    console.log("start");
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }
 
  componentWillUnmount() {
    console.log("end");
    clearInterval(this.timerID);
  }
 
  tick() {
    this.setState({
      date: new Date()
    });
  }
 
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>{this.name} {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
 
ReactDOM.render(
  <Clock name="vimi"/>,
  document.getElementById('vimi')
);

1、用箭头函数有弊端，每次回调都创建一个新的函数。

使用这个语法有个问题就是每次 LoggingButton 渲染的时候都会创建一个不同的回调函数。在大多数情况下，这没有问题。然而如果这个回调函数作为一个属性值传入低阶组件，这些组件可能会进行额外的重新渲染。我们通常建议在构造函数中绑定或使用属性初始化器语法来避免这类性能问题

2、react用三目运算符或者 && 控制东西都很方便

这个是函数传参

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {
        unreadMessages.length > 0 ?
        <h2>
          您有 {unreadMessages.length - 1} 条未读信息。
        </h2>
        :
        <h2>
          您有 hello 条未读信息。
        </h2>
      }
    </div>
  );
}
 
const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
  <Mailbox unreadMessages={[]} />,
  document.getElementById('vimi')
);

3、react中的key可以用来方便react监听变化，但是：如果列表可以重新排序，我们不建议使用索引来进行排序，因为这会导致渲染变得很慢。