react学习笔记

西瓜西瓜西西瓜
154 阅读2分钟

01虚拟dom的两种创建方式

例1-1：使用jsx语法创建


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>1_使用jsx创建虚拟DOM</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>

	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel" > /* 此处一定要写babel */
		//1.创建虚拟DOM
		const VDOM = (  /* 此处一定不要写引号，因为不是字符串 */
			<h1 id="title">
				<span>Hello,React</span>
			</h1>
		)
		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM,document.getElementById('test'))
	</script>
</body>
</html>

例1-2：使用react接口创建

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2_使用js创建虚拟DOM</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>

	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>

	<script type="text/javascript" > 
		//1.创建虚拟DOM
		const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'))
		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM,document.getElementById('test'))
	</script>
</body>
</html>

02jsx语法规则

【规则】：

  1. 定义虚拟dom，非字符串。类似html模板
  2. Mustache语法是 {}
  3. class属性对应为className
  4. 只有一个根标签
  5. 须有babel.js库将jsx语法转化为js语法
  6. 自定义组件标签大写，非自定义小写
  7. 事件如onClick需转为小写，onclick
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jsx语法规则</title>
	<style>
		.title{
			background-color: orange;
			width: 200px;
		}
	</style>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="app"></div>

	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel" >
		const text = 'Hellow React'

		//1.创建虚拟DOM
		const VDOM = (
			<div style={{width:'500px',height:'300px',backgroundColor:'black',margin:'0 auto'}}>
				<h1 style={{color:'white',textAlign:'center' ,lineHeight:'300px'}}>{text}</h1>
			</div>
		)
		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM,document.getElementById('app'))
        </script>

03定义组件

  1. 函数式定义组件
  2. 类继承定义组件

` 1)需要继承React.Component

2)必须定义render函数

`

例3-1：函数式定义组件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>函数式定义组件</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="app"></div>
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>

	<script type="text/babel" > 
        
		//1.创建一个函数需要返回模板
		function MyComponent(){
                    return
                    <h1>hllow react</h1>
                    
                
                }
		//2.渲染虚拟组件到页面
		ReactDOM.render(<MyComponent/>,document.getElementById('test'))
	</script>
</body>
</html>

例3-2：类继承式定义组件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>state简写方式</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel">
		//1.创建组件
		class PostList extends React.Component{
			constructor(props){
				super(props)
			}
			render(){
				return(

					<ul>
						<li>123456</li>
						<li>123456</li>
						<li>123456</li>
						<li>123456</li>
					</ul>
				) 
			}
		}
		ReactDOM.render(<PostList/>,document.getElementById('test'))
				
	</script>
</body>
</html>

3-1状态管理

  1. 属性：state
  2. 相关接口：setStates() 调用该方法之后会再调用render方法渲染页面
  3. 正确修改state

【注意】

  • 如何正确使用state
    • 这个变量是否通过props从父组件获取？
    • 是否在组件整个生命周期中都保持不变？
    • 是否在render方法中使用？
  • state与不可变对象
--- 需要使用setState()Api
--- React官方建议把state当作不可比变对象，state包含的所有状态都应该是不可变对象当state的某个状态发生变化时应该重新创建
         1）状态的类型是不可变（数字，字符串，布尔值，null,undefined）
         2) 状态类型是数组时：可以使用数组的concat的方法或者es6的数组扩展语法， slice方法 filter等方法
         3）状态类型是对象时：Es6的Object.assgin方法，对象扩展语法
         
---

3-2props属性（父子组件通信）

  1. 可以是函数
  2. 属性校验和默认值
    • React提供了PropTypes对象 用于校验组件属性的类型
    • 类型限制---- 可以提供propTypes类属性进行限制（用键值对表示）
    • 必须限制---- isRequired
    • 默认设置---- 提供defaultProps类属性 | 对应类型 | | | --- | --- | | js| PropTypes | |String | PropTypes.string| |Number |PropTypes.Number| |Boolean|PropTypes.bool| |Function|PropTypes.func| |Object|PropTypes.object| |Array|PropTypes.array|

3-3 特殊的ref

  1. 使用场景
    • 管理焦点，文本选择，或者媒体播放
    • 触发动画命名
    • 与第三方DOM库集成
  2. 使用方式
    • 使用字符串 不推荐使用
    • 使用回调函数
    • 使用 React.createRef()

3-4 子组件向父组件通信

  1. 方式：使用props向子组件中传入函数
    方式1
    



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type='text/babel'>
        class PostItem extends React.Component{
            static propsType = {
                post:PropsType.object.isRequired,
                onVote:PropsType.fun
                
            }
            constructor(props){
                super(props)
            }
          
            render(){
                const handleClick = ()=>{
                    this.props.onVote(this.props.post.id)
                }
                const {post} = this.props
                return (
                            <li>
                                <p><a href='#'>{post.title}</a></p>
                                <div>创建人:<span>{post.author}</span></div>
                                <div>创建时间:<span>{post.date}</span></div>
                                <button onClick={handleClick}>攒:{post.vote}</button>
                            </li>                                 
                )
            }

        }
      
        class PostList extends React.Component{
            constructor(props){
                super(props)
                this.state = {posts:[]}
                this.timer = null
            }

            componentDidMount(){
                this.timer = setTimeout(
                    ()=>{
                        this.setState(
                            {'posts':
                            [
                                {title:'全国人口141178万',author:'人m报',date:'2021-5-11 11:22',vote:5},
                                {title:'全国人口141178万',author:'人m报',date:'2021-5-11 11:22',vote:6},
                                {title:'全国人口141178万',author:'人m报',date:'2021-5-11 11:22',vote:7}
                            ]
                        })
                    },1000)
            }

            handleVote = id=>{
                const posts = this.state.posts.map(function(item){
                    const newItem = item.id ===id ? {...item,vote:++item.vote} : item
                    return newItem
                })
                this.setState({posts})
            }
            render(){

                return(
                    <div>
                        <ul>
                         {this.state.posts.map(item=>{
                             return <PostItem post = {item} onVote = {this.handleVote}></PostItem>
                         })}
                        </ul>
                    </div>
                )
            }

        }

        ReactDOM.render(<PostList></PostList>,document.getElementById('app'))

    </script>
</body>
</html>

3-5组件生命周期

  1. 旧生命周期（16版本以前）

2_react生命周期(旧).png

2.新生命周期

3_react生命周期(新).png

04路由

avatar
文章
阅读
粉丝