一小时入门React

1.基本语法（jsx）

const name="小明";
const getName = () => {
    return "小明"
}
const element = <h1>Hello, world!</h1>;
// 嵌入变量
const element = <h1>Hello, {name}</h1>;
// 嵌入表达式
const element = <h1>Hello, {getName()}</h1>;
复制代码

注意：在点击事件中，不要直接调用函数，若是须要传递参数，使用箭头函数,jsx中全部dom事件必须用驼峰命名。以下：

const a = <a onClick={() => this.handleClick(params)}>点击</a>
复制代码

1.1. 条件渲染

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />; } return <GuestGreeting />; } 复制代码

1.2. 循环渲染

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);
复制代码

2.组件

react中全部的东西都是组件，从定义类型组件分为函数式组件和class组件两种，从功能上区分又有容器组件和ui组件，根据表单相关又能够分为受控组件和非受控组件，更高级的组件用法还有高阶组件等。

react时单向数据流，数据只能从父组件传递给子组件，子组件经过props参数获取父组件传递的内容。

2.1.函数式组件

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
复制代码

2.2.class组件

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

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

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

  tick() {
    this.setState({
      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') ); 复制代码

2.3.容器组件

负责处理业务逻辑

//容器组件
class TodoListContainer extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            todos:[]
        }
        this.fetchData = this.fetchData.bind(this);
    }
    componentDidMount(){
        this.fetchData();
    }
    fetchData(){
        fetch('/api/todos').then(data =>{
            this.setState({
                todos:data
            })
        })
    }
    render(){
        return (
            <div> <TodoList todos={this.state.todos} /> </div> ) } } 复制代码

2.4.UI组件

只负责展现

//展现组件
class TodoList extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        const {todos} = this.props;
        return (
            <div> <ul> {todos.map((item,index)=>{ return <li key={item.id}>{item.name}</li> })} </ul> </div>
        )
    }
复制代码

2.5.受控组件

React 的 state 为“惟一数据源”。渲染表单的 React 组件还控制着用户输入过程当中表单发生的操做。被 React 以这种方式控制取值的表单输入元素就叫作“受控组件”。

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('提交的名字: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          名字:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="提交" />
      </form>
    );
  }
}
复制代码

2.6.非受控组件

表单数据将交由 DOM 节点来处理

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.input = React.createRef();
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.current.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={this.input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}
复制代码

2.7.高阶组件

高阶组件主要用来处理组件直接按可复用的逻辑，将可复用的部分抽离出来，供其他组件使用。

高阶组件是参数为组件，返回值为新组件的函数

const EnhancedComponent = higherOrderComponent(WrappedComponent);
复制代码

详情请参考react官网 高阶组件教程

3.组件生命周期

3.1.挂载

当组件实例被建立并插入 DOM 中时，其生命周期调用顺序以下：

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount() ---一般在今生命周期获取后端数据

3.2.更新

当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序以下：

• static getDerivedStateFromProps()
• shouldComponentUpdate() ---经常使用于代码优化
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

3.3.图解

4.setState详解

setState() 将对组件 state 的更改排入队列，并通知 React 须要使用更新后的 state 从新渲染此组件及其子组件。这是用于更新用户界面以响应事件处理器和处理服务器数据的主要方式。

4.1. 基本用法和参数

setState有两个参数，第一个是要更新的内容，能够是对象或者函数，第二个参数是回调函数更新完成后的操做能够写在回调函数中。

1）第一参数为对象

this.setState({quantity: 2})
复制代码

2）第一参数为函数

this.setState((state, props) => {
  return {counter: state.counter + props.step};
});
复制代码

setState() 的第二个参数为可选的回调函数，它将在 setState 完成合并并从新渲染组件后执行。一般，咱们建议使用 componentDidUpdate() 来代替此方式。

4.2 setState()执行后发生了什么？

• static getDerivedStateFromProps()
• shouldComponentUpdate() ---返回true则继续往下执行，返回false将不继续执行
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

5.路由基础

react-router官网

react路由升级到v4版本以后（目前已经到v5）,路由直接集成到DOM结构中，最经常使用的路由组件有:

// 至关于a标签的功能
 <Link to="/">Home</Link>
 
 // 路由容器，传入组件后，匹配到路由就会渲染对应组件
 <Route exact path="/" component={Home} />
 <Redirect to="/somewhere/else" />
 
 // 单页应用路由组件要包含整个项目最大的容器
 <Router>
  <App />
 </Router>
 
 // 使用switch将Route或者Redirect包起来以后，智慧渲染第一个匹配路由的组件
 <Switch>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/:user" component={User}/>
  <Route component={NoMatch}/>
 </Switch>

复制代码

关于每一个路与组件详细的api介绍，请参考react-router官网

6. React周边

• Antd -- ui组件库
• Material-UI -- ui组件库
• Redux -- 状态管理
• Mobx -- 状态管理
• React-Router --路由
• Ant Design Pro -- 后台管理系统最佳实践
• 社区精选组件