部门变动，技术栈vue转react。学习官网笔记

JSX 简介

JavaScript语言扩展，超集。具有JavaScript全部功能。

jsx语法中可以放置任何有效地JavaScript表达式

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

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

jsx简易使用括号包裹，避免自动插入分号
jsx中属性仅使用引号（对于字符串值）或大括号（对于表达式）中的一个。

jsx可以包含复杂子元素

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

jsx表达式会被编译为普通JavaScript函数。函数执行后为普通JavaScript对象

Babel会把jsx抓换为React.createElement()调用

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
// 等效下面
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement() 会预先执行一些检查，以帮助你编写无错代码，但实际上它创建了一个这样的对象(虚拟dom)：

// 注意：这是简化过的结构
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

元素渲染

元素是构成 React 应用的最小砖块。
元素描述了你在屏幕上想看到的内容。

1	const element = <h1>Hello, world</h1>;

与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。

组件&props

组件接收任意的入参(props)，返回页面内容react元素。

有两种方式可以创建组件

// 函数式组件
function Welcome(props) {
  return <h1>hello,{props.name}</h1>
}
// class 定义组件
class Welcome extends React.Component {
  render () {
    return <h1>hello,{this.props.name}</h1>;
  }
}

组件名称必须是大写开头
react必须像纯函数一样保证props不被更改

State & 生命周期

state是私有的，完全受控于当前组件

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

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

组件生命周期
- componentDidMount 组件已经挂载
- componentWillUnmount 组件将要卸载
如何更改state？
只可以调用setState函数，直接修改state.*不会渲染组件
state的更新是异步的
setState是增量更新，也就是说会保留原来的
react中数据的流动是从上往下的
state在react中是组件内部私有的

事件处理

react 事件函数采用camelCase书写
jsx语法需要传入一个函数

使用es6的class语法定义组件中事件的处理

class Toggle extends React.Component {
  constructor(props) {
    super(props)
    this.handleToggle = this.handle.bind(this)
  }
  handleToggle () {
    
  } 
  render () {
    return (
      <button onClick={this.handleClick}></button>
    )
  } 
}

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

  render() {
    // 此语法确保 `handleClick` 内的 `this` 已被绑定。
    return (
      <button onClick={() => this.handleClick()}>
        Click me
      </button>
    );
  }
}

此语法问题在于每次渲染 LoggingButton 时都会创建不同的回调函数。在大多数情况下，这没什么问题，但如果该回调函数作为 prop 传入子组件时，这些组件可能会进行额外的重新渲染。我们通常建议在构造器中绑定或使用 class fields 语法来避免这类性能问题。

class LoggingButton extends React.Component {
  // 此语法确保 `handleClick` 内的 `this` 已被绑定。
  // 注意: 这是 *实验性* 语法。
  handleClick = () => {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

向事件处理程序传递参数

1 2	<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button> <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

条件渲染

列表 & key

遍历出来的元素应该具有唯一的key值

组合继承

组件props，存在一个特殊的属性，children。代表组件jsx中包裹内容

lbp的blog

react基础笔记