React基础篇-初始

1.概念

用于构建用户界面的 JavaScript 库。

2.特点

1、声明式：React 可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图，在数据改变时 React 也可以高效地更新渲染界面。以声明式编写UI，可以让你的代码更加可靠，且方便调试。

2、组件化：创建好拥有各自状态的组件，再由组件构成更加复杂的界面。无需再用模版代码，通过使用JavaScript编写的组件你可以更好地传递数据，将应用状态和DOM拆分开来。

3、可用性：无论你现在正在使用什么技术栈，你都可以随时引入 React 开发新特性。React 也可以用作开发原生应用的框架React Native。

3.特性

1、组件：React 组件使用一个名为 render() 的方法， 接收数据作为输入，输出页面中对应展示的内容。 下面这个示例中类似XML的写法被称为JSX. 输入的数据通过 this.props（外部传入） 传入 render() 方法。

class HelloMessage extends React.Component {    //定义组件HelloMessage 
  render() {                                    //render函数返回需挂载DOM，JSX写法
    return (
      <div>
        Hello {this.props.name}                 //props为父级传递到子级的值，不可反向
      </div>
    );
  }
}

ReactDOM.render(                        //使用组件定义的DOM，初始化
  <HelloMessage name="yjs" />,        
  document.getElementById("app")        //组件DOM挂载的位置，一般使用ID
);
———————————————————————————————————————————————————————————————————————————————————————————
输出：
<div id="app">    
    <div>Hellow yjs</div>
</div>

2、状态：除了使用外部传入的数据以外 (this.props), 组件还可以拥有其内部的状态数据 (this.state)。 当组件的状态数据改变时， 组件会调用 render() 方法重新渲染。

class StateChange extends React.Component {
  constructor(props) {             //定义构造器，在此定义继承props；初始state；事件函数绑定
    super(props);                  //继承props
    this.state = { seconds: 0 };   //初始化state（可以理解成一个对象变量）
  }
  tick() {                                 //函数定义
    this.setState(prevState => ({          //setState()来改变state的值，然后重新渲染
      seconds: prevState.seconds + 1       //定时器中state的变化
    }));
  }
  componentDidMount() {                    //生命周期函数-第一次渲染挂载成功后调用(客户端)
    this.interval = setInterval(() => this.tick(), 1000);
  }
  componentWillUnmount() {                 //生命周期函数-组件从 DOM 中移除之前立刻被调用
    clearInterval(this.interval);
  }
  render() {
    return (
      <div>
        Seconds: {this.state.seconds}      //this.state.seconds在state变更时会随之变化
      </div>
    );
  }
}

ReactDOM.render(
    <StateChange />, 
    document.getElementById("app")
);
———————————————————————————————————————————————————————————————————————————————————————————
输出：
<div id="app">
    Seconds:0    //在这显示完以后，就会走生命周期的定时器，1000ms加一次
</div>

3、应用：使用 props 和 state, 我们可以创建一个简易的应用。 下面这个示例中，我们使用 state来保存；使用内联的方法添加了事件处理函数，它们将通过事件代理被收集和调用。

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { items: [], text: '' };
    this.handleChange = this.handleChange.bind(this);    //绑定函数到构造器，方便调用
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  render() {
    return (
      <div>
        <h3>TODO</h3>
        <TodoList items={this.state.items} />        //组件：ul-li列表，将列表集合item传递
        <form onSubmit={this.handleSubmit}>          //form表单提交，触发handleSubmit函数
          <input                        
            onChange={this.handleChange}             //input输入框，输入改变改变state的text
            value={this.state.text}
          />
          <button>
            添加第 {this.state.items.length + 1} 条   //使用存储在state的所有添加项
          </button>
        </form>
      </div>
    );
  }
  handleChange(e) {
    this.setState({ text: e.target.value });
  }
  handleSubmit(e) {
    e.preventDefault();                        //取消提交的默认事件
    if (!this.state.text.length) {             //输入框未输入，什么都不干
      return;
    }
    const newItem = {
      text: this.state.text,
      id: Date.now()
    };
    this.setState(prevState => ({
      items: prevState.items.concat(newItem),   //state-item添加新的项
      text: ''
    }));
  }
}

class TodoList extends React.Component {
  render() {
    return (
      <ul>
        {this.props.items.map(item => (          //map()方法，遍历父级的props渲染<li>
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
    );
  }
}

ReactDOM.render(<TodoApp />, mountNode);

4、第三方框架||库：React 的使用非常灵活，并且提供了可以调用其他第三方框架或库的接口，以下为我接触的组件库。

1、bootstrap组件库-react-bootstrap
    下载：npm install react-bootstrap --save
    index引用：import 'bootstrap/dist/css/bootstrap.min.css';
    引入：import { Navbar, Button } from 'react-bootstrap';

2、蚂蚁金服组件库-AlipayUI 
    下载：npm install antd-mobile --save
    引入：import { Button } from 'antd-mobile';
    使用：ReactDOM.render(<Button>按钮</Button>, mountNode);