React初学者指南-优快云博客

本文链接：https://blog.youkuaiyun.com/Zmongo/article/details/118370683

初学者 React

一、基本使用

1.JSX

介绍

jsx解决创建虚拟dom太繁琐，用原生js操作创建虚拟dom太复杂，用jsx方便于标签嵌套。虚拟DOM就是一个Object类型的对象。
不用模板字符串： 因为模板字符串是真实DOM
JSX（JavaScriptXML）
XML是早起用于存储传输数据
JSON——》代替XML

JSX语法规则

定义虚拟DOM是，不要引号
标签中混入js表达式时要用{}
样式的类名制定不要用class,要用className
内联样式：style不能是一个string,用{{key: name}}
style:{{color: ‘#ffff’, fontSize: “20px”}} {color: ‘#ffff’, fontSize: “20px”}是一个对象，外面的{}表示里面是js语句
虚拟DOM必须只有一个根标签
标签必须闭合
标签首字母：
（1）若小写字母开头，则将标签转为html中同名元素，若html中午与标签对应的同名元素则报错
（2）若大写字母开头，react会渲染对应的组件，若组件未定义，则报错

2.基本使用语法

代码如下：

<!-- 引入babel，用于将jsx转为js -->
	<div id="test"></div>
    <script type="text/babel">
    	const VDOM = <h2>无需引号</h2>//这里不用引号是因为script标签里用的babel，将jsx转换为js
    	ReactDOM.render(VDOM, document.getElementById('test')); //将VDOM渲染到test中，且需要一个盒子
    </script>

二、组件的使用

1.函数式组件

代码如下：

<script type="text/babel">
	function Demo() {
	console.log(this) //此处的this是undefined,因为babel编译后开启严格模式，否则此时应该指向window
		return <h2>函数式组件</h2>
	}
	//渲染组件到页面
        ReactDOM.render(<Demo/>, document.getElementById('test'))
        /// React解析组件 标签，找到了Demo组件
        /// 发现组件是使用函数定义的，随后调用该函数，剪个返回的虚拟DOM转为真实DOM，渲染到页面中
     
     // demo() {
        //         //bebal开启了严格模式禁止自定义的this指向window,这里的this指的是undefined
        //         console.log(this.state.isHot)
        //     }
</script>

2.类式组件

代码如下：

/// 创建类式组件
        //必须要继承一个React中的Component
        //必须要有render
        //render 必须要有返回值
        class MyComponent extends React.Component {
            constructor(props) {
                //在构造器里初始化状态，并且改变this指向
                //constructor只调用一次
                super(props)
                // super(props)的作用：构造器完全可以省略，但是如果不省略，props也不接不传,通过this访问props会undefined,
                // 构造器开发时几乎不会用
                this.state = {
                    isHot: true,
                    wind: '大风'
                }
                this.demo = this.demo.bind(this); //解决this指向问题(bind：一是生成新的函数，一是改变this),右侧的demo是从原型链上找到的，左侧上的是挂在自身上的demo
            }
            render() {
                //调用1+n次，n是状态的更改
                //render中的this，是MyComponent是实例对象
                const {isHot, wind} = this.state;
                //这里的this.demo 首先要先找挂在自身的方法，如果没有再找原型链
                return <h2 onClick={this.demo}>今天天气很{this.state.isHot ? '炎热' : '寒冷'}, {wind}</h2>
            }
            demo() {
                //点几次调用几次
                //这里的this指的是undefined，只有通过实例调用demo时它的this才会是实例对象，
                //render()中的this.demo不是通过实例调用的
                //类中方法this的指向：类中所有的方法都开启了局本严格模式，所以不能指向window，所以为undefined
                //由于demo是作为onclick的回调，所以不是调用类中的方法，而是直接调用堆中的函数，而又因为这个方法是类的方法被开启为局部严格模式，所以this为undefined
                console.log(this.state.isHot)
                const isHot = this.state.isHot;
                // state状态中的数据，React不支持直接更改,要使用内置API更改setState！！！！！！！！
                //且更新是一种合并不是替换
                this.setState({isHot: !isHot}) //成功

            }
        }
        //渲染组件到页面
        ReactDOM.render(<MyComponent/>, document.getElementById("test3"));
        /*
            执行了ReactDOM.render(<MyComponent/>...发生了什么？
            1、React解析组件标签，找到来了组件
            2、发现组件是用类定义的，然后new出来该类的实例
            并通过该实例调用到原型上的render方法
            3、将render返回的虚拟DOM转为真是DO。呈现在页面中
        */

3.类式组件——state简写

state是指组件内部自身的值

<div id="test"></div>
<script type="text/babel">
	//创建组件
        class Simple extends React.Component {
            //初始化状态，类中可以直接赋值，且不能在前面加变量声明
            state= {isHot: false, wind: '清风'}
            render() {
                const {isHot, wind} = this.state
                return <h1 onClick={this.Weather} className={isHot ? 'active' : 'actived'}>今天天气：{isHot ? '炎热' : '凉爽'}, {wind}</h1>
            }
            //赋值语句加箭头函数
            //自定义方法中this为undefined：1，强制绑定this,(bind()), 2,箭头函数
            Weather = ()=>{
                const isHot = this.state.isHot;
                this.setState({isHot:!isHot})
            }
        }
        //渲染组件到页面上
        ReactDOM.render(<Simple/>, document.getElementById('test'))
</script>

3.类式组件——props

props是指外部传入类式组件内部的值

<div id="test"></div>
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/babel">
	class Demo extends React.Component {
		render() {
		const {name, age, sex}  = this.props;
			return (
					<ul>
						<li>姓名：{name}</li>
						<li>年龄：{age}</li>
						<li>性别：{sex}</li>
					</ul>
				)
			}
}
 //props只读
    //类型与必选
    Demo.propTypes = {
        //PropTypes的类型为了避开关键字，所以大多小写
        name: PropTypes.string.isRequired,
        sex: PropTypes.string,
        age: PropTypes.number,
        //不能用function,因为function是一个关键字，所以传func,
        speak: PropTypes.func
    }
    //默认值
    Demo.defaultProps = {
        sex: '喵喵喵',
        age: 19
    }
    let obj = {
        name: "S",
        age: 23,
        sex:"女"
    }
    //渲染组件到页面
    //批量传递props，也就是批量传递标签属性
    ReactDOM.render(<Demo {...obj}/>, document.getElementById('test'))
    //进行类型限制、进行必传行限制、进行默认值限制
    ReactDOM.render(<Demo name="tom" age={22} sex="男" speak={speak} />, document.getElementById('test2'))
    function speak() {
        console.log('正在说话')
    }
</script>

3.类式组件——props简写

<script type="text/babel">
        //创建组件
        class Person extends React.Component {
             //props只读
            //类型与必选
            static propTypes = {
                //PropTypes的类型为了避开关键字，所以大多小写
                name: PropTypes.string.isRequired,
                sex: PropTypes.string,
                age: PropTypes.number,
                //不能用function,因为function是一个关键字，所以传func,
                speak: PropTypes.func
            }
            //默认值
            static defaultProps = {
                sex: '喵喵喵',
                age: 19
            }
            // state= {name: 'tome', age: 18, sex: '女'}
            render() {
                const { name, age, sex, speak } = this.props;
                return (
                    <ul>
                        <li onClick={speak}>姓名：{name}</li>
                        <li>性别：{age + 1}</li>
                        <li>年龄：{sex}</li>
                    </ul>
                )
            }
            
        }
        let obj = {
            name: "S",
            age: 23,
            sex: "女"
        }
        //渲染组件到页面
        //批量传递props，也就是批量传递标签属性
        ReactDOM.render(<Person {...obj} />, document.getElementById('test'))
        //进行类型限制、进行必传行限制、进行默认值限制
        ReactDOM.render(<Person name="tom" age={22} sex="男" speak={speak} />, document.getElementById('test2'))
        function speak() {
            console.log('正在说话')
        }
    </script>

4.类式组件——refs

ref就是把自身节点存入一个容器

<script type="text/babel">
        class Person extends React.Component {
            // static propsTypes = {

            // }
            // static defaultProps = {

            // }

            //展示左侧输入框的数据
            showData = () => {
               const {input1} = this.refs;
               alert(input1.value)
            }
            showData2 = ()=>{
                const { input2 } = this.refs;
                alert(input2.value)
            }
            // ref用来代替id是一个标识
            // 字符串的ref存在一些效率上的问题，写的过多之后会有问题
            //使用其它两种
            render() {
                return (
                    <div>
                        <input ref="input1" type="text" placeholder="点击按钮提示数据"/>
                        <button ref="button100" onClick={this.showData}>点击按钮</button> 
                        <input onBlur={this.showData2} ref="input2" type="text" placeholder="失去焦点提示数据"/>   
                    </div>
                )
            }
        }
        ReactDOM.render(<Person/>, document.getElementById('test'))
    </script>

5.类式组件——refs回调函数形式与createRef

createRef比较麻烦，所以还是经常用内联样式

<script type="text/babel">
        class Demo extends React.Component {
            myRef = React.createRef(); //调用后返回一个容器，该容器可以存储被ref所标识的节点,该容器是专人专用的也就是说只能存一个
             //展示左侧输入框的数据
            showData = () => {
                const {input1} = this;
                console.log(this.myRef.current.value)
                alert(input1.value)
            }
            showData2 = () => {
                const { input2 } = this;
                alert(input2.value)
            }
            //ref就是把自身节点存入一个容器
            //回调形式的ref
            //注释掉的内联样式的ref会被执行两次：
            //这是因为状态更改之后重新调用render,之前的内联函数执行完被释放了，所以这里的函数就是一个新函数了，
            //因为不确定之前释放的函数做了什么，所以要先清空，所以传了一个null，然后再传入自身节点
            //但是无关紧要，所以大多数还是用内联
            saveInput= (c)=> {
                this.input1 = c
            }
            render() {
                return (
                    <div>
                        {/*<input ref={c=>this.input1 = c} type="text" placeholder="点击按钮提示数据" />*/}
                        <input ref={this.saveInput} type="text" placeholder="点击按钮提示数据" />
                        <button ref="button100" onClick={this.showData}>点击按钮</button>
                        <input onBlur={this.showData2} ref={c =>this.input2 = c} type="text" placeholder="失去焦点提示数据" />
                        <input ref={this.myRef} type="text"/>
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo/>, document.getElementById("test"))
    </script>

6.受控组件的高阶函数和柯里化

柯里化可以让我们给一个函数传递较少的参数，得到一个已经记住了某些固定参数的新函数，这就是柯里化的核心。在柯里化内部就是使用闭包，对函数的参数进行缓存。柯里化让函数变得更灵活，因为我们可以通过一个函数生成一些细粒度更小的函数。这么做的目的是为了在后续函数组合的时候在使用。柯里化可以把多元函数转换成一元函数，目的是可以组合使用函数产生强大的功能
原文链接：https://blog.youkuaiyun.com/weixin_33503186/article/details/112049619

<script type="text/babel">
        //发生事件的元素刚好是要操作的元素就不要用ref
        //收集表单数据
        // react没有vue的双向数据绑定，需要自己用onChange去写
        //受控组件类似vue双向绑定，而且不用ref，所以一般用这种
        class NotContral extends React.Component {
            state = {
                username: '',
                password: ''
            }
            //保存表单数据到状态中
            //这就是函数的柯里化技术：两个函数里的dataType和event两个参数最后集中处理
            saveFormData = (dataType)=>{
                //render首次直接将saveFormData的返回值给onChange，也就是一个匿名函数，
                //当onChange触发时，调用的其实是这个匿名函数，所以react会传event给这个匿名函数
                //这是个高阶函数
                /*
                    高阶函数满足条件：(promise,setTimeOut,arr.map())
                    1.若A函数接收的参数是一个函数，那么这个A就是高阶函数
                    2.若A函数，调用的返回值是一个函数，那么A就是高阶函数

                    函数的柯里化：
                    通过函数连续调用继续返回函数，实现多次接受参数最后统一处理的编码方式
                */
                return (event)=>{
                    console.log(dataType, event.target.value)
                    this.setState([dataType], event.target.value)
                }
            }
            //不用柯里化的实现方式
            saveFormData = (dataType, event)=>{
                this.setState({[dataType]: event})
            }
            submit = (event) => {
                event.preventDefault(); //阻止表单默认跳转操作
                const { username, password } = this.state;
                console.log(username, password)
            }
            render() {
                return (
                    <form onSubmit={this.submit}>
                        {/*不用柯里化*/}
                        用户名：<input type="text" onChange={event=>this.saveFormData('username', event.target.value)} name="username" placeholder="请输入用户名" />
                        {/*用柯里化*/}
                        用户名：<input type="text" onChange={this.saveFormData('username')} name="username" placeholder="请输入用户名" />
                        密码：<input type="password" name="password" onChange={this.saveFormData('password')} placeholder="请输入密码" />
                        <button>登录</button>
                    </form>
                )
            }
        }
        ReactDOM.render(<NotContral />, document.getElementById('test'))
    </script>

三、生命周期

1.旧生命周期

分为三个阶段：
1、初始化阶段：由ReactDOM.render()触发 ----------- 初次渲染
(1)Constructor()
(2)componentWillMount()
(3)render()
(4)componentDidMount() ====>常用（一般在这个钩子中做一些出初始化的事：开启定时器、发送网络请求、订阅消息）
2、更新阶段：由组件内部this.setState()或父组件render触发
(1)shouldComponentUpdate()
(2)componentWillUpdate()
(3)render()
(4)componentDidUpdate()
3、卸载结算：由ReactDOM.unmountComponentAtNode()触发
(1)componentWillUnmount() ===>常用(一般在这个钩子中做一些收尾的事：关闭定时器、取消订阅消息)

附：网上找到的图，做了一些注释

2.新生命周期

在新生命周期中componentWillMount,componentWillUpdate和componentWillReceviceProps要在前面加上UNSAFE前缀（后面会废弃）

原因：

新提出了两个生命周期钩子，但是实际中用的很少：
getDerivedStateFromProps() 从props中得到一个派生的状态，让state无论什么时候都取决于props，可以使用但不是必须使用，很少用，用的时候会导致代码冗余。
getSnapshotBeforeUpdate(){
return 状态；
}
获得更新前的快照，有一些数据是要在更新前获取的。用法不常见。在componentDidUpdate()中接受三个参数非别是更新前的props，更新前的state和快照返回的值。

diff问题

在这里插入图片描述

四，脚手架

1.安装

主要是一因为安装脚手架的时候遇到了报错比如phthon之类的错
所以要先安装yarn


npm install -g yarn
 
yarn global add create-react-app
 
create-react-app my-app

2.样式模块化

样式模块化

五、redux与react-redux的使用

redux只负责管理状态，至于状态的改变驱动着页面的展示，要靠我们自己写。
使用情况：
同一个state需要在多个Component中共享
需要操作一些全局性的常驻Component,比如Notifications,Tooltips等
太多props需要在组件树种传递，其中大部分只是为了传给子组件
业务太复杂导致Component文件太大，可以考虑将业务逻辑拆出来放到Reducer中
过程：
应用的state统一放到里面维护，当需要修改state的时候，dispath一个action给reducer，reducer算出新的state后，再将state发布给事先订阅的组件。

1、redux的使用

流程图
reducer的本质是一个函数，接收：preState,action，返回加工后的状态
reducer被第一次调用时，是store自动触发的，
传递的preState是undefined,
传递的action是:{type:'@@REDUX/INIT_a.2.b.4}

API:
store.subscribe(用于index.jsx文件夹中，作用为只要store中状态更新就render组件,也可用于组件中，但组件中要重复写，所以还是要写在入口文件中)因为Dom的diff算法，所以不会引起大规模的重绘重排

store.subscribe(()=>{
ReactDOM.render(,document.getElementById(‘root’))
})

createStore（引入createStore，专门用于创建redux中最为核心的store对象）

import {createStore} from ‘redux’
//引入为Count组件服务的reducer
import countReducer from ‘./count_reducer’
//暴露store
export default createStore(countReducer)

store.dispatch(给store派发一个action对象，store接受action之后传给reducer,reducer接收action对象后根据type类型对状态进行操作，并返回值。在组件中通过store调用状态)

store.dispatch(createIncrementAction(value*1))
store.getState()

异步action
同步action，就是指action的值为Object类型的一般对象
异步action，就是指action的值为函数,异步action中一般都会调用同步action，异步action不是必须要用的。
因为异步action返回的是函数，而reduce默认接收的是对象，所以这时要通过一个中间件进行操作
import thunk from ‘redux-thunk’
引入 applyMiddleware中的redux，这个中间件
这个中间件的意义就在于它会告知store，先不要把action传给reducer，等异步任务执行完返回对象时再传给reducer
//引入redux-thunk，用于支持异步action

//同步action，就是指action的值为Object类型的一般对象
export const createIncrementAction = data => ({type:INCREMENT,data})
export const createDecrementAction = data => ({type:DECREMENT,data})

//异步action，就是指action的值为函数,异步action中一般都会调用同步action，异步action不是必须要用的。
export const createIncrementAsyncAction = (data,time) => {
	return (dispatch)=>{
		setTimeout(()=>{
			dispatch(createIncrementAction(data))
		},time)
	}
}

2、react-redux的使用

在这里插入图片描述

合并reducer

combineReducers

const AllReducers = combineReducers({
    he: countReducer,
    ren: personReducer
})

如果有多个reducer,则要在store.js中合并reducer,合并后的reducer，在store中以对象的形式存在。
combineReducers传入的对象就是redux中要保存的redux对象。

UI组件与容器组件可以合并为一个文件

如何创建一个容器组件————靠react-redux 的 connect函数
connect(mapStateToProps,mapDispatchToProps)(UI组件)
-mapStateToProps:映射状态，返回值是一个对象
-mapDispatchToProps:映射操作状态的方法，返回值是一个对象容器

组件的主要代码

export default connect(
state=>({person: state.ren, count: state.he}),
//state是状态，uI组件是容器组件的字组件所以ui组件中使用状态需要this.props.person
{ add: createAddPersonAction}
//这是行为
)(Person) //Person：这个Person，将容器组件与ui组件连接到一起

步骤：(1).定义好UI组件—不暴露
(2).引入connect生成一个容器组件，并暴露，写法如下：
connect(
state => ({key:value}), //映射状态
{key:xxxxxAction} //映射操作状态的方法
)(UI组件)
(4).在UI组件中通过this.props.xxxxxxx读取和操作状态

无需自己给容器组件传递store，给包裹一个即可。
使用了react-redux后也不用再自己检测redux中状态的改变了，容器组件可以自动完成这个工作

连接

容器组件要连接UI组件与store，
连接UI组件通过react-redux中的connect()方法即可连接，
连接右手的store不能通过improt引入要通过App.js中的组件传入

{/* 给容器组件传递store */}

但是如果有多个组件就会出现代码冗余的现象，这时要在index.jsx入口文件里调用Provider,这样就不需要在App.jsx中传递store了。

import { Provider } from ‘react-redux’ //Provider可以让所有容器组件自动传入store不需要自己每次都
这里是引用

<Provider store={store}>
        < App />
    </Provider>,

在react-redux中：
//检测redux中状态的改变，若redux的状态发生了改变则重新渲染app组件
// react-redux 不用检测状态的改变，容器组件已经有了检测的能力
// store.subscribe(()=>{
// ReactDOM.render(, document.getElementById(‘root’))
// })
以上这段监测react-redux状态重新渲染app组件的能力可以省略，因为react-redux中已经进行监测了