React基础及React项目

JSX

在 React 中使用 JSX 语法(JavaScript扩展)描述用户界面，在 React 代码执行之前，Babel 会将 JSX 语法转换为标准的 JavaScript API。JSX 语法就是一种语法糖。让开发人员舒服

JSX不同于vue模板的

属性值为JavaScript表达式，属性值外面加大括号。
const element = <img src={user.avatarUrl} />;// 注意大括号外面不能加引号，JSX 会将引号当中的内容识别为字符串而不是表达式
为 JSX 标记添加类名需要使用 className
自动展开数组，循环遍历展示用map

类组件中的ref属性

使用React中的React.createRef()创建ref实例

class Input extends Component {
  constructor() {
    super()
    this.inputRef = React.createRef()
  }
  render() {
    return (
      <div>
        <input type="text" ref={this.inputRef} />
        <button onClick={() => console.log(this.inputRef.current)}> button </button>
      </div>
    )
  }
}

类组件 函数组件以及props属性

import React, { Component } from 'react';
class App extends Component {
	static defaultProps = {}//设置props的默认值
    render () {
        return <div><h4>年龄：{this.props.age}</h4></div>
    }
}

函数组件

const Person = props => {
  return (
    <div>
      <h3>姓名：{props.name}</h3>
      <h4>年龄：{props.age}</h4>
    </div>
  );
}
Person.defaultProps = {
  name: "secondary",
  age: "11"
};

props中数据不能被修改，单向数据流
通过 props.children 属性可以获取到在调用组件时填充到组件标签内部的内容

组件状态和双向数据绑定

类组件如下,在父组件中设置state，定义更改状态值的方法，通过this.setState更改组件状态,给子组件传递状态值和更改状态值的方法，子组件的值绑定上父组件传递来的状态，并在值更新时调用父组件传递过来的更改状态值的方法

class App extends Component {
  constructor () {
    this.state = {
      name: "张三"
    }
    this.nameChanged = this.nameChanged.bind(this)
  }
  nameChanged (event) {
    this.setState({name: event.target.value});
  }
  render() {
    return (
      <div>
        <div>{this.state.name}</div>
        <Person name={this.state.name} changed={this.nameChanged}/>
      </div>
    )
  }
}

const Person = props => {
	return <input type="text" value={props.name} onChange={props.changed}/>;
}

函数组件通过useState解构出状态值和更改状态值的方法const [skip, setSkip] = useState<number>(0),原理与上述同

类组件的生命周期

• constructor()在组件被创建时调用。
• componentDidMount() 钩子在组件输出被渲染到 DOM 之后运行。
• componentWillUnmount() 在组件卸载及销毁之前直接调用。

context的使用

Context多个组件之间共享状态,跨层级的传递数据
使用 React.createContext() 创建一个新的 Context 对象。

const MyContext = React.createContext();
Context.Provider
Context.Provider 是一个组件，用于接收一个 value prop，该 value prop 将被传递给下层的组件。

<MyContext.Provider value={/* some value */}>
  {/* 子组件 */}
</MyContext.Provider>

Context.Consumer
Context.Consumer 是一个组件，用于订阅 Context 的变化。这个组件接收一个函数作为子组件，这个函数接收当前的 context 值作为参数。

<MyContext.Consumer>
  {value => /* 使用 value */}
</MyContext.Consumer>

useContext Hook
useContext 是一个 React Hook，用于在函数组件中订阅 Context 的变化。

const value = useContext(MyContext);

路由

npm install react-router-dom

react-router-dom@5版本的基本使用

// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
function Index() {
	return <div>首页</div>;
}
function News() {
	return <div>新闻</div>;
}
function App() {
  return (
    <Router>
      <div>
        <Link to="/index">首页</Link>
        <Link to={`/news?id=${item.id}`}>新闻</Link>
      </div>
      <div>
        <Route path="/index" component={Index}/>
        <Route path="/news/:id" component={News}/>
      </div>
    </Router>
  );
}

使用url包来读取到路由信息

路由的重定向

import { Redirect } from 'react-router-dom';

class Login extends Component {
  render() {
    if (this.state.isLogin) {
      return <Redirect to="/"/>
    }
  }
}

React Hooks对函数型组件进行增强

• useState() 获取设置State的状态值方法和state . 参数可以是⼀个函数, 函数返回什么, 初始状态就是什么, 函数只会被调⽤⼀次, ⽤在初始值是动态值的情况 设置状态值⽅法的⽅法是异步的
• useReducer 另一种让函数组件保存状态的方式
  
• useContext() 跨阶级获取组件值
• useEffect()让函数组件获取处理副作用的能力，类似生命周期函数

useEffect(() => {}) => componentDidMount, componentDidUpdate(在组件完成更新后立即调用。在初始化时不会被调用。 当state或者props改变时触发) 
useEffect(() => {}, []) => componentDidMount 在DOM渲染完成时执行，只会执行一次 ,[]中有状态值的话在状态值变化的时候调用 
useEffect(() => () => {}) => componentWillUnMount 在{}写的js在组件卸载时执行

useEffect中的参数函数不能是异步函数，如果里面要有异步函数需要加函数自执行

• useMemo类似于计算属性
• memo 方法包裹函数组件使其类似于函数的纯组件（props和state不变化就不会重新渲染，props数据深层会有问题，谨慎使用）
• useCallback的参数数组中的值发生变化时让只依赖于其值的组件渲染，并不会让全部组件渲染，提高性能。
• useRef()函数获取组件实例
  
• 自定义Hook函数 ToDo

react-router-dom 路由提供的钩⼦函数

React+redux项目

redux用法

redux的使用步骤

<script>
    // 3. 存储默认状态
    var initialState = {
      count: 0
    }
    // 2. 创建 reducer 函数
    function reducer (state = initialState, action) {
      switch (action.type) {
        case 'increment':
          return {count: state.count + 1};
        case 'decrement':
          return {count: state.count - 1}
        default:
          return state;
      }
    }
    // 1. 创建 store 对象
    var store = Redux.createStore(reducer);

    // 4. 定义 action
    var increment = { type: 'increment' };
    var decrement = { type: 'decrement' };

    // 5. 获取按钮 给按钮添加点击事件
    document.getElementById('plus').onclick = function () {
      // 6. 触发action
      store.dispatch(increment);
    }

    document.getElementById('minus').onclick = function () {
      // 6. 触发action
      store.dispatch(decrement);
    }

    // 7. 订阅 store
    store.subscribe(() => {
      // 获取store对象中存储的状态
      // console.log(store.getState());
      document.getElementById('count').innerHTML = store.getState().count;
    })
  </script>

按钮点击之后触发action被reducer接收到然后根据action中的type类型更改了state，更改state之后触发subscribe在其中的回调函数中更改视图