Xiaoyu's Blog
Go back

React学习记录 Day01

😀
这篇文章是关于学习React三大组件的记录。文章包括了State练习、Props使用、Ref的使用等内容。通过这些练习，可以学习到React的基本概念和用法。

📝 React Day 01

一、小练习

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.2.0/umd/react.production.min.js" ></script>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/babel-standalone/6.26.0/babel.min.js" ></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
const root = ReactDOM.createRoot(document.getElementById("example"));

// 渲染 React 组件到 DOM

const arry = ["react","js","vue"]
const h1 = (
     <div>
         <h1>Hello, React!</h1>
         <ul>
             {arry.map((item,index)=>{
                 return <li>{item}</li>
             })}
         </ul>    
     </div>
 }
root.render(h1);
</script>
<script type="text/javascript">
    class Persion{
        constructor(name,age){
            this.name = name;
            this.age = age;
        }
        speak(){
            console.log(`我是${this.name},我的年龄是${this.age}`)
        }
    }
    const p1 = new Persion("张三",15)
    p1.speak()
</script>
</body>
</html>

二、State练习

1.完整版本

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.2.0/umd/react.production.min.js" ></script>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/babel-standalone/6.26.0/babel.min.js" ></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
const root = ReactDOM.createRoot(document.getElementById("example"));

class Weather extends React.Component{
    constructor(props){
        super(props)
        this.state = {isHot : true}
        this.changeWethear = this.changeWethear.bind(this)
    }
    render(){
        console.log(this)
        var {isHot} = this.state
        return <h1 onClick={this.changeWethear}>今天的天气是{isHot?"炎热":"凉爽"}</h1>
    }
    changeWethear(){
        var isHot = this.state.isHot
       this.setState({isHot: !isHot})
    }
}
root.render(<Weather/>);

</script>

2.简写版本

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.2.0/umd/react.production.min.js" ></script>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/babel-standalone/6.26.0/babel.min.js" ></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
const root = ReactDOM.createRoot(document.getElementById("example"));

class Weather extends React.Component{
    state={isHot:true}
    render(){
        console.log(this);
        var {isHot} = this.state;
        return <h1 onClick={this.changeWethear}>今天的天气是{isHot?"炎热":"凉爽"}</h1>
    }
    changeWethear = ()=>{
       var isHot = this.state.isHot;
       this.setState({isHot: !isHot});
    }
}
root.render(<Weather/>);

</script>

三、Props使用

1.类使用props

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.2.0/umd/react.production.min.js" ></script>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/babel-standalone/6.26.0/babel.min.js" ></script>
</head>
<body>

<div id="example"></div>
<div id="example1"></div>
<div id="example2"></div>
<script type="text/babel">
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>
            <li>{this.props.title}</li>
            </ul>
    }
}
ReactDOM.render(<Person name='张三'  age={18} sex="女" title="ceo"/>,document.getElementById('example'));
class Leader{
    name = '李四'
    age = 19
    sex= '男'
    title = '学生'
}
var leader = new Leader()
ReactDOM.render(<Person {...leader}/>,document.getElementById('example1'));
leader.name='王五'
ReactDOM.render(<Person name={leader.name}  age={leader.age} sex={leader.sex} title={leader.title}/>,document.getElementById('example2'));
</script>
  1. props限制
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.2.0/umd/react.production.min.js" ></script>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/babel-standalone/6.26.0/babel.min.js" ></script>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/prop-types/15.8.1/prop-types.min.js" ></script>
</head>
<body>

<div id="example"></div>
<div id="example1"></div>
<div id="example2"></div>
<div id="example3"></div>
<script type="text/babel">
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>
            <li>{this.props.title}</li>
            </ul>
    }
}

ReactDOM.render(<Person name='张三'  age={18} sex="女" title="ceo"/>,document.getElementById('example'));
class Leader{
    name = '李四'
    age = 19
    sex= '男'
    title = '学生'
}
var leader = new Leader()
ReactDOM.render(<Person {...leader}/>,document.getElementById('example1'));
leader.name='王五'
Person.propTypes = {
  title: PropTypes.string.isRequired,
};
ReactDOM.render(<Person name={leader.name}  age={leader.age} sex={leader.sex} />,document.getElementById('example2'));
</script>

3. 函数式组件使用props

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.2.0/umd/react.production.min.js" ></script>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/babel-standalone/6.26.0/babel.min.js" ></script>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/prop-types/15.8.1/prop-types.min.js" ></script>
</head>
<body>

<div id="example"></div>

<script type="text/babel">
function Person({name,age,sex,title}) {
    return (
        <div>
	            <ul>
		            <li>{name}</li>
		            <li>{age}</li>
		            <li>{sex}</li>
		            <li>{title}</li>
	            </ul>
           </div>)
    }
ReactDOM.render(<Person name='张三'  age={18} sex="女" title="ceo"/>,document.getElementById('example'));
</script>

四、Ref

Ref 的使用

在 React 中，ref 是一种为 DOM 元素或类组件实例创建引用的方式。我们可以通过 ref 来直接访问 DOM 元素或组件的实例方法和属性。

在 React 中，有三种创建 ref 的方式：

  1. 字符串形式的 ref：
    通过字符串形式的     ref，可以在组件中直接使用 this.refs 来访问 DOM 元素。这种方式比较简单，但在未来的 React 版本中可能会被移除。

    <input ref="inputTxt" type="text" placeholder="点击按钮展示" />

  2. 回调形式的 ref：
    使用回调函数形式的     ref，可以在回调函数中接收 DOM 元素或者组件实例，并将其保存到组件实例的属性中。这种方式更灵活。

    <input ref={(c) => { this.inputTxt2 = c }} type="text" placeholder="点击按钮展示" />

  3. React.createRef 创建 ref：
    使用     React.createRef 创建 ref，可以在类组件的构造函数中创建 ref，并在组件中使用 this.refName.current 来访问 DOM 元素或者组件实例。这种方式是推荐的方式。

    this.inputTxt3 = React.createRef();

<input ref={this.inputTxt3} type="text" placeholder="点击按钮展示" />

这些方式都可以用来创建 ref，具体使用哪种方式取决于具体的需求和代码风格。

demo：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.2.0/umd/react.production.min.js"></script>
    <script
        src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/prop-types/15.8.1/prop-types.min.js"></script>
</head>

<body>
    <div id="example"></div>
    <script type="text/babel">
        class RefExample extends React.Component {
            inputTxt3 = React.createRef()
            showData = () => {
                alert(this.refs.inputTxt.value)
            }
            showData2 = (event) => {
                //直接使用形参，不使用ref
                alert(event.target.value)
            }
            showData3 = () => {
                alert(this.inputTxt2.value)
            }
            showData4 = () => {
                console.log(this.inputTxt3)
                alert(this.inputTxt3.current.value)
            }
            render() {
                return (
                    <div>
                        <h1>字符串形式的ref</h1>
                        <input ref="inputTxt" type="text" placeholder="点击按钮展示" />
                        <button onClick={this.showData} >点击</button><br />
                        <input onBlur={this.showData2} placeholder="失去焦点展示" />
                        <h1>回调形式的ref</h1>
                        <input ref={(c) => { this.inputTxt2 = c }} type="text" placeholder="点击按钮展示" />
                        <button onClick={this.showData3} >点击</button><br />
                        <h1>createRef形式</h1>
                        <input ref={this.inputTxt3} type="text" placeholder="点击按钮展示" />
                        <button onClick={this.showData4} >点击</button><br />
                    </div>
                )
            }
        }
        ReactDOM.render(<RefExample />, document.getElementById('example'));
    </script>

Share this post:
Share this post on WhatsappShare this post on FacebookShare this post on XShare this post on TelegramShare this post on PinterestShare this post via email
Previous Post
记录一次压测经验总结
Next Post
React学习记录 Day02