React学习记录（1）

黄同学不会前端

已于 2024-06-27 10:10:40 修改

阅读量327

点赞数 3

文章标签： react.js 学习 javascript

于 2024-06-26 09:05:16 首次发布

本文链接：https://blog.csdn.net/m0_56164661/article/details/139971702

版权

因为公司接下来的项目用到React，所以最近跟着尚硅谷视频学习，框架之中有相通之处，所以在学习React时不时与Vue进行对比。

1.jsx

React 中使用可以使用 JSX 来替代JavaScript，下面是在React框架中使用jsx的一个例子

<!-- 准备好一个“容器” -->
	<div id="test"></div>

//1.创建虚拟DOM
		const VDOM = (
            <div>
                <h1 className='title'>
                <span style= {{color:'white'}} >{a.toLocaleLowerCase()}</span>    
                </h1>
                <h1 className='title'>
                <span style= {{color:'white'}} >{a.toLocaleLowerCase()}</span>    
                </h1>
                 <input type="text"/> 
            </div>
			
		)

//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM,document.getElementById('test'))

在React框架中使用jsx创建的虚拟dom节点，挂在到页面容器中，其中不难看出jsx有以下语法规则：

1.只有一个根标签，例子中的根标签为div

2.标签中混入JS表达式时要用{}，与Vue中的{{}}双花括号作用类似

3.样式的类名指定不再使用原生js中的class，用className

4.内联样式，要用style={{key:value}}的形式去写，这倒是和Vue一样

5.标签首字母

(1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。

(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

2.组件

在React中组件分为函数式组件和类组件，下面是分别使用其创建组件的例子

//1.创建函数式组件
        function Demo (){
            return <h1>黄同学不会前端</h1>
        }
		//2.渲染组件到页面
		ReactDOM.render(<Demo/>,document.getElementById('test'))
		/* 
			执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？
					1.React解析组件标签，找到了MyComponent组件。
					2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。
		*/

// 使用类组件需要继承React中的Component类
        class MyComponent extends React.Component{
            render(){
                // 类组件中的render方法中的this指向组件实例
                console.log("render中的this",this);
                return <h2>黄同学不会前端</h2>
            }
        }
        ReactDOM.render(<MyComponent/>,document.getElementById('test'))
		/* 
			执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？
					1.React解析组件标签，找到了MyComponent组件。
					2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
					3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
		*/

创建类组件与函数式组件相比，需要继承React中的Component类，且需要将要渲染的虚拟dom节点放在render()中,render函数是组件生命周期的一部分，后面讲到组件的生命周期会着重去讲。

在这里，React中的组件与Vue中的组件意义有所不同，且创建方式也有不一样，Vue中的组件，更多是指封装公用部分，以达到复用的效果，无需像React中创建虚拟dom再渲染成真实dom。

3.组件实例三大属性

1.state

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面。

//1.创建组件
		class Weather extends React.Component{
			//初始化状态
			state = {isHot:false,wind:'微风'}

			render(){
				const {isHot,wind} = this.state
				return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
			}

			//自定义方法————要用赋值语句的形式+箭头函数
			changeWeather = ()=>{
				const isHot = this.state.isHot
				this.setState({isHot:!isHot})
			}
		}
		//2.渲染组件到页面
		ReactDOM.render(<Weather/>,document.getElementById('test'))

这里需要注意的是自定义方法changeWeather使用赋值语句+箭头函数的书写方式，箭头函数没有this指向，向外围寻找到Weather实例，所以其可以访问state中的数据，在state中初始化

状态，changeWeather方法中使用setState修改状态。

2.props

state 和 props 主要的区别在于 props 是不可变的，而子组件只能通过 props 来传递数据。

在类组件中使用props

 class Person extends React.Component {
            render(){
             console.log(this);
             return (
                <ul>
                    <li>姓名：{this.props.name}</li>
                    <li>年龄：{this.props.age}</li>
                    <li>性别：{this.props.sex}</li>    
                </ul>
             )
            }
        }

        // 对传进组件中的标签属性进行限制
        Person.propTypes= {
            name:PropTypes.string.isRequired, //限制文件必传
            age:PropTypes.number,
            speak:PropTypes.func
        }
        // 对传进组件中的标签属性设置默认值
        Person.defaultProps ={
            sex:'男'
        }
        ReactDOM.render(<Person name='hzj' age={18} speak={speak}/>, document.getElementById('test'))
        
        function speak(){
            console.log(name);
        }

组件中使用标签属性键值对方法传入数据，使用可以使用propTypes和defaultProps对传进组件中的标签属性进行限制和设置默认值。

3.Refs

React 支持一种 Ref 绑定到 render() 输出的组件上，形式有三种：字符串形式的ref，回调函数形式中的ref，以及createRef

1.字符串形式

 class Demo extends React.Component{
            // 展示左侧输入框的数据
            showInfo = ()=>{
                const {input1} =this.refs
                console.log(input1.value);
            }
            // 展示右侧输入框的数据
            showInfo1 = ()=>{
                const {input2} =this.refs
                console.log(input2.value);
            }

            render(){
                return(
                    <div>
                        <input ref='input1' type='text' placeholder='点击按钮提示左侧数据'></input>
                        <button onClick={this.showInfo}>点击</button> 
                        <input ref='input2' type='text' onBlur={this.showInfo1} placeholder='失去焦点提示'></input>   
                    </div>
                )
            }


   
        }

         ReactDOM.render(<Demo />,document.getElementById('test'))

组件中使用ref=’‘，挂载到组件实例中refs中，即可获取组件dom节点实例

2.回调函数形式

class Demo extends React.Component{
            // 展示左侧输入框的数据
            showInfo = ()=>{
                const {input1} =this
                console.log(input1.value);
            }
            // 展示右侧输入框的数据
            showInfo1 = ()=>{
                const {input2} =this
                console.log(input2.value);
            }

            render(){
                return(
                    <div>
                        <input ref={c =>this.input1 = c} type='text' placeholder='点击按钮提示左侧数据'></input>
                        <button onClick={this.showInfo}>点击</button> 
                        <input ref={c =>this.input2 = c} type='text' onBlur={this.showInfo1} placeholder='失去焦点提示'></input>   
                    </div>
                )
            }
        }

         ReactDOM.render(<Demo />,document.getElementById('test'))

3.createRef

class Demo extends React.Component{
            // ref容器
            myRef1 =React.createRef()

            myRef2 =React.createRef()

            // 展示左侧输入框的数据
            showInfo = ()=>{
                console.log(this.myRef1.current.value);
            }
            // 展示右侧输入框的数据
            showInfo1 = ()=>{
                console.log(this.myRef2.current.value);
            }

            render(){
                return(
                    <div>
                        <input ref={this.myRef1} type='text' placeholder='点击按钮提示左侧数据'></input>
                        <button onClick={this.showInfo}>点击</button> 
                        <input ref={this.myRef2} type='text' onBlur={this.showInfo1} placeholder='失去焦点提示'></input>   
                    </div>
                )
            }
        }

         ReactDOM.render(<Demo />,document.getElementById('test'))