React相关

最新推荐文章于 2025-03-19 12:46:06 发布

原创最新推荐文章于 2025-03-19 12:46:06 发布 · 248 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jlkjkl

本文深入讲解React的基础使用、核心概念及执行原理，并介绍其生态系统中的关键组成部分如Redux、React-Router、Axios等。

React
Redux + React-Redux
React-Router
Axios
LESS
webpack

React

React的使用

React的执行原理主要是生命周期函数的自执行与state的触发执行。

将React组件渲染到html标签中。其中ReactDOM来自react-dom。

<div id='root'></div>
<script>
ReactDOM.render(
    <ReactComponent/>,
    document.getElementById('root')
);
</script>

创建React组件。

export default class Test extends React.Component {
    //1 第一个周期函数 完成组件的实例化，并初始化state或prop
    constructor(props){
        super(props);
        this.state = {
            //default state
        },
        this.param = {
            //params等
        }
    },
    //2 在此函数内异步请求后端获取数据。首次可修改state
    componentWillMount(){
        ...
    }，
    //3 虚拟DOM
    render(){
        return(
            <div>...</div>
        )
    }，
    //4 真实DOM完成渲染后执行。可访问首次渲染的真实DOM的周期函数
    componentDidMount(){
        ...
    },
    //5 父组件的state发生变化导致子组件的props变化后触发
    componentWillReceiveProps(){
        ...
    },
    //6 判断props或state是否变化，返回true/false
    shouldComponentUpdate(nextProps, nextState){
        ...
    },
    //7 执行完下面的周期函数会立即触发render
    componentWillUpdate(){
    },
    //8 可访问更新后的真实DOM的周期函数
    componentDidUpdate(){
    },
    //9 组件移除即刷新或离开页面时触发。一般用来中断请求
    componentWillUnmount(){
    }

}

几个关键概念

this.findDOMNode
获取真实DOM元素。也可用原生方法获取。
this.props
一般是组件与组件间传递参数。可以是上个组件的state，也可是给该组件设定的属性。
this.context
实现跨级组件间传递参数。context相当于全局变量。避免组件污染，一般不用。
this.refs
render返回的元素的属性，可以利用它获取DOM元素
key
组件的唯一健值。当更改组件位置时，React根据此值做到只更新组件位置而不重新渲染。
this.props.history.push
React.render与ReactDOM.render
react包含react-dom。故React.render与ReactDOM.render含义一样，都是将react组件渲染到html元素上。但现在常用ReactDOM.render。
react包括：React.createElement, .createClass, .Component, .proptypes, .children等;
react-dom包括：ReactDOM.render, .findDOMNode, .UnmountComponentAtNode等。
React.Component与React.createClass
都是用来创建组件的。
React.Component是ES6中的方法。需手动绑定this。推荐使用。
React.createClass是ES5方法。会自动绑定this。会逐渐被上面的方法替代。