用到的react

总结

知道组件,了解state和props,基本就可以知道react怎么工作了.

1 元素渲染

1.1 渲染到<div>元素上

<div id="example"></div>
const element = <h1>Hello, world!</h1>;
ReactDOM.render(
    element,
    document.getElementById('example')
);

1.2 使用this.props更新元素内容

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>现在是 {this.props.date.toLocaleTimeString()}.</h2> // 这里使用参数
      </div>
    );
  }
}

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />, // 从这里传入参数
    document.getElementById('example')
  );
}

setInterval(tick, 1);

2 jsx

react用来声明1个元素的语法, 元素是构成react应用的最小单位. 通常是外层1个<div>.

ReactDOM.render(
    <h1>Hello, world!: {1+1}</h1>, // 这个就是react一个元素, `{1+1}`是js表达式
    document.getElementById('example')
);

3 组件

1个组件只有1个顶层标签, 声明后,就可以用 <Nickname ...> 使用这个组件了.
props是组件参数,如果使用extends React.Component定义的组件,需要用this.props获取参数;

function Name(props) {                          // 声明组件
    return <h1>网站名称：{props.name}</h1>;
}
class Url extends React.Component {             // 声明组件
  render() {
    return <h1>网站地址：{this.props.url}</h1>;
  }
}

function Nickname(props) {                      // 声明组件
    return <h1>网站小名：{props.nickname}</h1>;
}
function App() {
    return (
    <div>
        <Name name="菜鸟教程" />                 // 使用组件
        <Url url="http://www.runoob.com" />     // 使用组件
        <Nickname nickname="Runoob" />          // 使用组件
    </div>
    );
}

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

4 state 状态

每个组件可以有不同的状态, 组件决定外观和动作,state决定数据,相当于WPF的databinding. 更新state后, react会重新渲染界面;
状态是组件内部局部变量.父组件和子组件都不能知道组件内部状态. 数据自顶向下通过props流动

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()}; // 在组件构造函数中初始化state
  }

  componentDidMount() {             // 组件挂载回调
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {          // 组件卸载回调
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({                 // 更新状态,react会自动更新页面元素
      date: new Date()
    });
  }

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

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

5 props

props不可变,是一次性传入的, state是可变的

6 事件处理

html使用小写

<button onclick="activateLasers()"> 激活按钮 </button>

react使用jsx

<button onClick={activateLasers}> 激活按钮 </button>

在react事件处理回调中绑定this的三种方法

6.1 在constructor中bind

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

    // 这边绑定是必要的，这样 `this` 才能在回调函数中使用
    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('example')
);

6.2 使用属性初始化器语法–常用

class LoggingButton extends React.Component {
  // 这个语法确保了 `this` 绑定在  handleClick 中
  handleClick = () => {
    console.log('this is:', this);
  }

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

6.3 回调函数中使用箭头函数

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

  render() {
    return (
        //  这个语法确保了 `this` 绑定在  handleClick 中
      <button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>
    );
  }
}

7 列表

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('example')
);

8 react 组件api

• 设置状态：setState
• 替换状态：replaceState
• 设置属性：setProps
• 替换属性：replaceProps
• 强制更新：forceUpdate
• 获取DOM节点：findDOMNode
• 判断组件挂载状态：isMounted