React 入门 3：组件的诞生

本篇关于组件的诞生，包括函数组件和 class 组件。
简单组件用函数，
复杂组件用 class。

组件的构想

（一）构想1：函数组件

把一堆标签用函数包起来，然后 return 出去，这个函数名就代表了这一堆标签。

定义一个函数

function App() {
  return <div className="App">hi</div>;
}
ReactDOM.render(<App />, document.getElementById("root"));

注意：<App /> 等价于 <App></App> 等价于 React.createElement(App)。表示的就是函数App里返回的内容。

那么，给函数传参该怎么做？

（二）构想2

标签就是函数，函数就是对象，标签的属性就是函数的参数。

传参示例

// 使用{props.name}获取传过来的参数
function Box1(props) {
  return <div>{props.name}</div>;
}
function App() {
  return (
    <div className="App">
      <Box1 name="jack" />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

但在 React 世界里，函数无法做到修改别人传的参数。
希望既能满足函数的功能，又能局部 render。

于是 class 组件诞生了。

（三）构想三：class 组件

最简单的例子：

class App extends React.Component {
  render() {
    return (
      <div>
        app {this.props.name} {this.props.age}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App name="jack" age={18} />, rootElement);

1. 组件如何拥有自己的局部变量？
   规定：在 class App 里使用 constructor

constructor(props) {
    super();
    //局部变量初始化
    this.state = {
      name: props.name
    };
  }

2. 如何修改参数 / 局部变量？
   依然是在 class App 里

class App extends React.Component {
  constructor(props) {
    super();
    //局部变量初始化
    this.state = {
      number: 0,
      name: props.name,
      age: props.age
    };
  }
//对参数或局部变量的修改只能用 setState
  setName() {
    this.setState({
      name: "rose"
    });
  }
  render() {
    return (
      <div>
        app {this.state.name} {this.state.age}
        <button onClick={this.setName.bind(this)}>点我修改名字</button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App name="jack" age={18} />, rootElement);

新手注意事项：

• onClick 后的函数名不能加上 ()
  加上()的话，就是将函数的返回值结果传给onClick ，但onClick 要的是函数。
• 组件名首字母必须大写
• 关于 this
  React 调用onClick 时，是：onClick.call(undefined, 其他函数)
  即 React 强制把 this 变为 undefined

该怎么办？
① bind

onClick={this.setName.bind(this)}

② 箭头函数 () => { }

onClick={()=> this.setName()}

• 对参数或局部变量的修改只能用 setState
  不能直接修改，如 this.state.number += 1 (不能这样用)