路白-react.js基础

1. 简介

React 是一个用于构建用户界面的 JAVASCRIPT 库，主要用于构建 UI，很多人认为 React 是 MVC 中的 V，起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它

1. 声明式设计 −React采用声明范式，可以轻松描述应用。
2. 高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
3. 灵活 −React可以与已知的库或框架很好地配合。
4. JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
5. 组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6. 单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

2. JSX

React 使用 JSX 来替代常规的 JavaScript，JSX 是一个看起来很像 XML 的 JavaScript 语法扩展，其实就是将js和html结合起来书写。

const jsx = <p>hello, jerry</p>;

render() {
	return jsx;
}

3. State

如果视图内的数据需要修改, 并且同时页面响应变化，我们需要将数据放在state中, 使用setState来修改数据。

1. this.state.xx = xxx修改无法使视图响应变化
2. this.setState(obj) 该更新是异步更新，setState之后不能像Vue那种之后在后面拿到最新值
3. this.setState(obj, callback) callback为state更新的回调
4. this.setState((preState) => {}) 该方法中的preState能拿到最新更新完的值

import React, { Component } from 'react'

export default class Clock extends Component {
  state = {
      date: new Date()
  }

  componentDidMount(){
      this.timer = setInterval(() => {
          this.setState({
              date: new Date()
          })
      }, 1000);
  }

  componentWillUnmount(){
      clearInterval(this.timer);
  }

  render() {
    return (
      <div>
        {this.state.date.toLocaleTimeString()}
      </div>
    )
  }
}

4. Props

父子组件间的属性传递, 通过props进行.

<App title="哈哈哈哈" />

<h2>{this.props.title}</h2>

5.context

Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据，例如当前认证的用户、主题或首选语言。

React.createContext

创建一个Context对象，不管是Provider还是Consumer都需要用到这个对象，一个是在一个单独的文件进行定义，便于引入到需要用到的组件

import React from 'react';
export const MyContext = React.createContext();
export const { Provider, Consumer } = MyContext

Context.Provider

这个一个生产者组件，消费者组件需要用到的内容由该组件提供，通过value属性传入

import React from 'react';
import { Provider } from './context'

class App extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      userInfo: {},
      theme: 'dark',
      language: 'CN'
    }
  }

  render() {
    const value = this.state
    // 使用一个 Provider 来将当前的value传递给以下的组件树。
    // 无论多深，任何组件都能读取这个值。
    // 在这个例子中，我们将用户信息、主题和语言作为当前的值传递下去。
    return (
      <Provider value={value}>
        <Toolbar/>
      </Provider>
    );
  }
}

Context.Consumer

使用Consumer组件获取值

import React from 'react';
import { Consumer } from './context';

class ConsumerPage extends React.Component {
  render() {
    return (
      <Consumer>
        {context => {
          return (
            <div>
              userInfo:{context.userInfo}