react知识总结

用于构建用户界面的 JavaScript 库

JSX语法

style

let style = {
  color: 'r'+'ed',
  fontSize: '30px'
}
let jsx = <div style={style}>jsx...</div>;

className

import './index.scss';
let jsx = (
  <div className="jsx">
  jsx...
  </div>
);

变量的使用和条件判断

let name = "Jomsou";
let flag = false;
let jsx = (
  <div>
    { flag ? <p> I am {name} </p> : <p> I am not {name}</p>} 
  </div>
);

数组循环

let names = ['jomsou', 'marry', 'james']
let jsx = (
  <div>
    { names.map((name, index)=><p key={index}>Hello, I am {name}</p>)}
  </div>
);

React组件的定义

ES5
function  Component() {
  return <h1>I am Jomsou</h1>
}
ES6
class ES6component extends React.Component{
  render(){
    return <h1>I am Jomsou</h1>
  }
}
ReactDOM.render(
  <div>
    <Component/>
    <ES6component/>
  </div>,
  document.getElementById('app')
);

state：状态，即所有参数
setState：设置状态变化
super：继承父组件的this指针

class ES6component extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      name: 'Jomsou'
    }
  }
  render(){
    //用于异步操作
    setTimeout(() => {
      this.setState({
        name: 'Jomsou Can'
      })
    }, 2000);
    return <h1>I am {this.state.name}</h1>
  }
}
ReactDOM.render(
  <div>
    {/* <Component/> */}
    <ES6component/>
  </div>,
  document.getElementById('app')
);

props: 父组件往子组件里传递东西

class ES6component extends React.Component{
  constructor(props){
    super(props);
  }
  render(){
    return <h1>I am {this.props.name}</h1>
  }
}
ReactDOM.render(
  <div>
    <ES6component name="Jomsou STC"/>
  </div>,
  document.getElementById('app')
);

事件处理

方式1：

1、按钮button点击后，this会改变，所以需要在constructor中加this.handleClick = this.handleClick.bind(this);

handleClick(){
    this.setState({
        age: this.state.age+1
    })
}
render(){
    return (
        <div>
        <h1>I am {this.state.name}</h1>
        <p>I am {this.state.age} years</p>
        <button onClick={this.handleClick}>加一岁</button>
        </div>
    )
}

方式2：

onValChange(e){
    this.setState({
      age: e.target.value
    })
  }
  render(){
    return (
      <div>
        <h1>I am {this.state.name}</h1>
        <p>I am {this.state.age} years</p>
        <input type="text" onChange={(e)=>this.onValChange(e)} />
      </div>
    )
  }

容器式组件和单纯组件

class Title extends React.Component {
  render(props){
    // return <h1>{this.props.title}</h1>
    return <h1>{this.props.children}</h1>
  }
}
class App extends React.Component {
  render(){
    return (
      <div>
      {/* 容器式组件 */}
        {/* <Title title="App Title"/> */}
        <Title>
          <span>App Span</span>
          <a href="">link</a>
        </Title>
        <hr/>
        {/* 单纯组件 */}
        <Component/>
      </div>
    )
  }
}

父组件向子组件传值

用props传值

class Title extends React.Component {
  render(props){
    <h1>{this.props.title}</h1>
  }
}
class Father extends React.Component {
  constructor(props){
    super(props);
  }
  render(){
    return (
      <div}>
        <Title title="App Title"/>
      </div>
    )
  }
}

子组件向父组件传值

通过回调函数

class Child extends React.Component {
  constructor(props){
    super(props);
  }
  handleClick(){
    this.props.onChangeColor('red');
  }
  render(){
    return (
      <div>
        <h1>父组件的背景颜色：{this.props.bgColor}</h1>
        <button onClick={(e)=>this.handleClick(e)}>改变颜色</button>
      </div>
    )
  }
}
class Title extends React.Component {
  render(props){
    return <h1>{this.props.children}</h1>
  }
}
class Father extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      bgColor: '#999'
    }
  }
  onChangeColor(color){
    this.setState({
      bgColor: color
    })
  }
  render(){
    return (
      <div style={{background: this.state.bgColor}}>
        <Child bgColor={this.state.bgColor} onChangeColor={color=>this.onChangeColor(color)}/> 
      </div>
    )
  }
}
ReactDOM.render(
  <div>
    <Father/>
  </div>,
  document.getElementById('app')
);

兄弟组件相互传值

状态提升——先提升到父组件上，再到兄弟组件里

class Child1 extends React.Component {
  constructor(props){
    super(props);
  }
  handleClick(){
    this.props.changeChild2Color('red');
  }
  render(){
    return (
      <div>
        <h1>child1：{this.props.bgColor}</h1>
        <button onClick={(e)=>this.handleClick(e)}>改变颜色</button>
      </div>
    )
  }
}
class Child2 extends React.Component {
  constructor(props){
    super(props);
  }
  render(){
    return (
      <div style={{background: this.props.bgColor}}>
        <h1>Child2：{this.props.bgColor}</h1>
      </div>
    )
  }
}
class Title extends React.Component {
  render(props){
    return <h1>{this.props.children}</h1>
  }
}
class Father extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      bgColor: '#999'
    }
  }
  onChangeChild2Color(color){
    this.setState({
      bgColor: color
    })
  }
  render(){
    return (
      <div>
        <Child1 changeChild2Color={(color)=>this.onChangeChild2Color(color)}/> 
        <Child2 bgColor={this.state.bgColor}/> 
      </div>
    )
  }
}
ReactDOM.render(
  <div>
    <Father/>
  </div>,
  document.getElementById('app')
);

生命周期

从生到死

作用：

• Mounting: 挂载阶段
• Updating：运行时阶段
• Unmounting：卸载阶段
• Error Handling： 错误处理

挂载阶段

constructor
componentWillMount
render
componentDidMount

有更新的情况

componentWillReceiveProps//如果父组件向子组件传值，执行
shouldComponentUpdate: 默认是true，可以更新//设置为flase则没有以下步骤
componentWillUpdate
render
componentDidUpdate

卸载阶段

componentWillUnmount

Router原理及React-Router

历史--栈的形式
跳转--可传递数据
事件

常见的Router

• 页面Router：重新渲染

window.location.href="https://www.baidu.com"

• Hash Router

window.loaction = '#hash';
window.onhashchange = function(){
  console.log('current hash:', window.location.hash)
}

• H5 Router

包括页面跟hash路由

//推进一个状态
history.pushState('name', 'title', '/path');
//替换一个状态
history.replaceState('name', 'title', '/path');
//popstate
window.onpopstate = function(){
  console.log(window.location.href);
  console.log(windos.location.pathname);
}

HashRouter和BrowserRouter

import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter as Router, Route, Link } from 'react-router-dom';

class A extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <div>Component A</div>
        )
    }
}
class B extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <div>Component B</div>
        )
    }
}
class Wraper extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <div>
                <Link to="/a">组件A</Link>
                <br/>
                <Link to="/b">组件B</Link>
                {this.props.children}
            </div>
        )
    }
}

ReactDOM.render(
    <Router>
        <Wraper>
            <Route path="/a" component={A} />
            <Route path="/b" component={B} />
        </Wraper>
    </Router>
    , document.getElementById('app'));

如果把hashRouter改成BrowserRouter，则变成