React 全家桶-React基础

格调小黄 發表於 2022-11-6 19:37:00

<h1 id="react-全家桶-react基础">React 全家桶-React基础</h1>
<p><strong>用于构建用户界面的JavaScript库</strong>。</p>
<p><strong>facebook开源</strong>、<strong>组件化</strong>、<strong>声明式编码</strong>、<strong>React Native移动端开发</strong>、<strong>虚拟DOM+Diffing算法</strong></p>
<p>官网：https://react.docschina.org/</p>
<h2 id="第一章react的基本使用">第一章：React的基本使用</h2>
<h3 id="1相关js库">1.相关js库</h3>
<ul>
<li>react.js：React核心库</li>
<li>React-dom.js：提供操作DOM的react扩展库</li>
<li>Babel.min.js：解析JSX语法代码转为JS代码的库
<ul>
<li><strong>ES6转ES5</strong></li>
</ul>
</li>
</ul>
<h3 id="2创建虚拟dom的两种方式">2.创建虚拟DOM的两种方式</h3>
<ul>
<li>JSX</li>
<li>JS</li>
</ul>
<h3 id="3jsx">3.JSX</h3>
<p><strong>React定义的一种类似于XML的JS扩展语法：JS + XML</strong></p>
<p>它最终产生的结果<strong>不是字符串</strong>，也<strong>不是HTML/XML标签</strong>，而<strong>是一个JS对象</strong></p>
<p>语法规则：</p>
<ul>
<li>
<p>标签中混入JS表达式要用{}</p>
<ul>
<li>
<blockquote>
<p>表达式：一个表达式会返回一个值，而代码块不一定有值返回</p>
</blockquote>
</li>
</ul>
</li>
<li>
<p>样式的类名指定不要用class属性名，用className</p>
</li>
<li>
<p>内联样式，要用style={{key: value}}的形式去写</p>
</li>
<li>
<p>只能有一个根标签</p>
</li>
<li>
<p>标签必须闭合</p>
</li>
<li>
<p>JSX标签转换规则</p>
<ul>
<li>若小写字母开头，则将该标签转换为html中同名元素，若html中无该标签对应的同名元素，则报错</li>
<li>若大写开头，则渲染对应的组件，若组件未曾定义，则报错</li>
</ul>
</li>
</ul>
<h3 id="4模块化与组件化">4.模块化与组件化</h3>
<p><strong>模块：向外提供特定功能的js程序，一般是一个js文件</strong></p>
<p><strong>组件：实现局部功能效果的代码和资源的集合</strong></p>
<h2 id="第二章react面向组件编程">第二章：React面向组件编程</h2>
<h3 id="1基本理解和使用">1.基本理解和使用</h3>
<h4 id="11-react开发者工具">1.1 React开发者工具</h4>
<p>React Developer Tools 浏览器插件</p>
<h4 id="12-效果">1.2 效果</h4>
<p>函数式组件</p>
<pre><code class="language-jsx"><body>
<div id="ctx"></div>
<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>
<script type="text/babel">
   // 1. 创建函数式组件
   function Demo () {
         console.log(this) // 此处的this是undefined，因为babel编译后开启了严格模式
         return <h2>用函数定义的组件</h2>
   }

   // 2. 渲染组件到页面
   ReactDOM.render(<Demo/>, document.getElementById('ctx'))
   /*
         渲染步骤：
         1. React解析组件标签，找到了了Demo组件
         2. 发现组件是使用函数定义的。随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面上
   */
</script>
</body>
</code></pre>
<p>类式组件</p>
<pre><code class="language-jsx"><body>
<div id="ctx"></div>
<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>
<script type="text/babel">
   // 1. 创建类式组件
   class MyComponent extends React.Component {
         render () {
            console.log(this)
            return <h2>用类定义的组件，适用于复杂组件的定义</h2>
         }
   }
   ReactDOM.render(<MyComponent/>, document.getElementById('ctx'))
   /*
         渲染步骤：
         1. React解析组件标签，找到了了 MyComponent 组件
         2. 发现组件是使用类定义的。随后new出该类的实例，并通过该实例调用原型上的render方法，将返回的虚拟DOM转为真实DOM，随后呈现在页面上
   */
</script>
</body>
</code></pre>
<h3 id="2组件三大核心属性">2.组件三大核心属性</h3>
<h4 id="21-state">2.1 state</h4>
<pre><code class="language-jsx"><body>
<div id="ctx"></div>
<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>
<script type="text/babel">
   class Weather extends React.Component {
         state = {
            isHot: false
         }
         render () {
            const {isHot} = this.state
            return <h2 onClick={this.changeWeather}>天气：{isHot ? '热' : '凉' }，风速：{isHot ? '一级' : '二级' }</h2>
         }
         // 自定义方法，要用赋值语句+箭头函数（箭头函数没有自己的this）
         changeWeather = () => {
            this.state.isHot = !this.state.isHot
            this.setState(this.state)
         }
   }
   ReactDOM.render(<Weather/>, document.getElementById('ctx'))
</script>
</body>
</code></pre>
<h4 id="22-props">2.2 props</h4>
<h5 id="类式组件使用props">类式组件使用props</h5>
<pre><code class="language-jsx"><body>
<div id="ctx"></div>
<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>

<script src="../js/prop-types.js" type="text/javascript"></script>
<script type="text/babel">
   class Person extends React.Component {

         // 构造器是否接收props，是否传递给super？问题取决于：是否希望在构造器中通过this访问props
         constructor(props) {
            super(props)
            console.log('c', this.props)
         }

         // 对标签属性进行类型、必要性的限制
         static propTypes = {
            name: PropTypes.string.isRequired
         }

         // 指定默认值
         static defaultProps = {
            sex: '未知'
         }

         render () {
            const {name, age, sex} = this.props
            return (
               <ul>
                     <li>姓名：{name}</li>
                     <li>性别：{sex}</li>
                     <li>年龄：{age}</li>
               </ul>
            )
         }
   }


   const p = {name: '逾期', age: 18, sex: '女'}
   ReactDOM.render(<Person {...p}/>, document.getElementById('ctx'))
</script>
</body>
</code></pre>
<h5 id="函数式组件使用props">函数式组件使用props</h5>
<pre><code class="language-jsx"><body>
<div id="ctx"></div>
<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>

<script src="../js/prop-types.js" type="text/javascript"></script>
<script type="text/babel">

   function Person (props) {
         const {name, sex, age} = props
         return (
               <ul>
                     <li>姓名：{name}</li>
                     <li>性别：{sex}</li>
                     <li>年龄：{age}</li>
               </ul>
            )
   }

   // 对标签属性进行类型、必要性的限制
   Person.propTypes = {
         name: PropTypes.string.isRequired
   }

   // 指定默认值
   Person.defaultProps = {
         sex: '未知'
   }

   const p = {name: '逾期', age: 18, sex: '女'}
   ReactDOM.render(<Person {...p}/>, document.getElementById('ctx'))
</script>
</body>
</code></pre>
<h4 id="23-refs与事件处理">2.3 refs与事件处理</h4>
<p><strong>组件内的标签可以定义ref属性来标识自己</strong></p>
<h5 id="231-字符串形式的refs">2.3.1 字符串形式的refs</h5>
<pre><code class="language-jsx"><body>
<div id="ctx"></div>
<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>

<script src="../js/prop-types.js" type="text/javascript"></script>
<script type="text/babel">
   class Demo extends React.Component {
         showData = () => {
            const {input1} = this.refs
            alert(input1.value)
         }
         showData2 = () => {
            const {input2} = this.refs
            alert(input2.value)
         }
         render() {
            return (
               <div>
                     <input ref="input1" type="text" placeholder="点击按钮提示数据"/>
                     <button onClick={this.showData}>点我提示左侧数据</button>
                     <input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
               </div>
            )
         }
   }
   ReactDOM.render(<Demo/>, document.getElementById('ctx'))
</script>
</body>
</code></pre>
<h5 id="232-回调函数形式的refs">2.3.2 回调函数形式的refs</h5>
<pre><code class="language-jsx"><body>
<div id="ctx"></div>
<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>

<script src="../js/prop-types.js" type="text/javascript"></script>
<script type="text/babel">
   class Demo extends React.Component {
         showData = () => {
            const {input1} = this
            alert(input1.value)
         }
         showData2 = () => {
            const {input2} = this
            alert(input2.value)
         }
         render() {
            return (
               <div>
                     <input ref={c => this.input1 = c} type="text" placeholder="点击按钮提示数据"/>
                     <button onClick={this.showData}>点我提示左侧数据</button>
                     <input onBlur={this.showData2} ref={c => this.input2 = c} type="text" placeholder="失去焦点提示数据"/>
               </div>
            )
         }
   }
   ReactDOM.render(<Demo/>, document.getElementById('ctx'))
</script>
</body>
</code></pre>
<h5 id="233-createref">2.3.3 createRef</h5>
<pre><code class="language-jsx"><body>
<div id="ctx"></div>
<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>

<script src="../js/prop-types.js" type="text/javascript"></script>
<script type="text/babel">
   class Demo extends React.Component {
         myRef = React.createRef()
         showData = () => {
            console.log(this.myRef)
            alert(this.myRef.current.value)
         }
         render() {
            return (
               <div>
                     <input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>
                     <button onClick={this.showData}>点我提示左侧数据</button>
               </div>
            )
         }
   }
   ReactDOM.render(<Demo/>, document.getElementById('ctx'))
</script>
</body>
</code></pre>
<h5 id="234-事件处理">2.3.4 事件处理</h5>
<p><img src="https://bwqueen-note-img.oss-cn-hangzhou.aliyuncs.com/img/image-20221020005016547.png"></p>
<h4 id="24-收集表单数据">2.4 收集表单数据</h4>
<h5 id="241-受控组件">2.4.1 受控组件</h5>
<pre><code class="language-jsx"><body>
<div id="ctx"></div>
<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>

<script src="../js/prop-types.js" type="text/javascript"></script>
<script type="text/babel">
   class Demo extends React.Component {
         state = {
            username: '',
            password: ''
         }
         saveUsername = (e) => {
            this.setState({username: e.target.value})
         }
         savePassword = (e) => {
            this.setState({password: e.target.value})
         }
         handleSubmit = (e) => {
            e.preventDefault() // 阻止form表单提交事件
            const {username, password} = this.state
            alert(`username: ${username.value}, password: ${password.value}`)
         }
         render() {
            return (
               <form onSubmit={this.handleSubmit}>
                     用户名：<input onChange={this.saveUsername} type="text" name="username"/>
                     密码：<input onChange={this.savePassword} type="text" placeholder="password"/>
                     <button>login</button>
               </form>
            )
         }
   }
   ReactDOM.render(<Demo/>, document.getElementById('ctx'))
</script>
</body>
</code></pre>
<h5 id="242-非受控组件">2.4.2 非受控组件</h5>
<pre><code class="language-jsx"><body>
<div id="ctx"></div>
<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>

<script src="../js/prop-types.js" type="text/javascript"></script>
<script type="text/babel">
   class Demo extends React.Component {
         handleSubmit = (e) => {
            e.preventDefault() // 阻止form表单提交事件
            const {username, password} = this
            alert(`username: ${username.value}, password: ${password.value}`)
         }
         render() {
            return (
               <form onSubmit={this.handleSubmit}>
                     用户名：<input ref={c => this.username = c} type="text" name="username"/>
                     密码：<input ref={c => this.password = c} type="text" placeholder="password"/>
                     <button>login</button>
               </form>
            )
         }
   }
   ReactDOM.render(<Demo/>, document.getElementById('ctx'))
</script>
</body>
</code></pre>
<h5 id="243-函数的柯里化">2.4.3 函数的柯里化</h5>
<pre><code class="language-jsx"><body>
<div id="ctx"></div>
<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>

<script src="../js/prop-types.js" type="text/javascript"></script>
<script type="text/babel">
   class Demo extends React.Component {
         state = {
            username: '',
            password: ''
         }
      /**
         * 高阶函数：如果一个函数符合下面两个规范中的任一，那该函数就是高阶函数
         * 1. 若A函数接收的参数是一个函数，那么A就可以称之为高阶函数
         * 2. 若A函数调用的返回值依然是一个函数，那么A就可以称之为高阶函数
         * 函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数，最后统一处理的函数编码形式
         */
         saveFormData = (dataType) => {
            return (e) => {
               return this.setState({: e.target.value})
            }
         }
         handleSubmit = (e) => {
            e.preventDefault() // 阻止form表单提交事件
            const {username, password} = this.state
            alert(`username: ${username.value}, password: ${password.value}`)
         }
         render() {
            return (
               <form onSubmit={this.handleSubmit}>
                     用户名：<input onChange={this.saveFormData('username')} type="text" name="username"/>
                     密码：<input onChange={this.saveFormData('password')} type="text" placeholder="password"/>
                     <button>login</button>
               </form>
            )
         }
   }
   ReactDOM.render(<Demo/>, document.getElementById('ctx'))
</script>
</body>
</code></pre>
<h4 id="25-组件生命周期">2.5 组件生命周期</h4>
<h5 id="251-旧版生命周期">2.5.1 旧版生命周期</h5>
<img src="https://bwqueen-note-img.oss-cn-hangzhou.aliyuncs.com/img/image-20221022113756797.png">
<h5 id="_"></h5>
<pre><code class="language-jsx"><body>
<div id="ctx"></div>
<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>

<script src="../js/prop-types.js" type="text/javascript"></script>
<script type="text/babel">
   class Count extends React.Component {

         constructor(props) {
            console.log('Count-constructor')
            super(props)
            this.state = {
               count: 0
            }
         }
         add = () => {
            const {count} = this.state
            this.setState({
               count: count+1
            })
         }
         death = () => {
            ReactDOM.unmountComponentAtNode(document.getElementById('ctx'))
         }
         force = () => {
            this.forceUpdate()
         }
         componentWillMount() {
            console.log('Count-componentWillMount')
         }
         componentDidMount() {
            console.log('Count-componentDidMount')
         }
         shouldComponentUpdate() {
            console.log('Count-shouldComponentUpdate')
            return false
         }
         componentWillUpdate() {
            console.log('Count-componentWillUpdate')
         }
         componentDidUpdate() {
            console.log('Count-componentDidUpdate')
         }
         componentWillUnmount() {
            console.log('Count-componentWillUnmount')
         }

         render() {
            console.log('Count-render')
            const {count} = this.state
            return (
               <div>
                     <h2>当前求和为: {count}</h2>
                     <button onClick={this.add}>点我+1</button>
                     <button onClick={this.death}>卸载组件</button>
                     <button onClick={this.force}>强制更新</button>
               </div>
            )
         }
   }

   // 父组件A
   class A extends React.Component {
         state = {
            carName: '奔驰'
         }
         changeCar = () => {
            this.setState({carName: '奥迪'})
         }
         render() {
            return (
               <div>
                     <div>A component</div>
                     <button onClick={this.changeCar}>换车</button>
                     <B carName={this.state.carName}/>
               </div>
            )
         }
   }
   // 子组件B
   class B extends React.Component {
         // 第一次渲染不会调用这个钩子
         componentWillReceiveProps(props) {
            console.log('B-componentWillReceiveProps', props)
         }
         render() {
            return (
               <div>
                     <div>B component: carName={this.props.carName}</div>
               </div>
            )
         }
   }
   // ReactDOM.render(<Count/>, document.getElementById('ctx'))
   ReactDOM.render(<A/>, document.getElementById('ctx'))
</script>
</body>
</code></pre>
<h5 id="252-新版生命周期">2.5.2 新版生命周期</h5>
<img src="https://bwqueen-note-img.oss-cn-hangzhou.aliyuncs.com/img/image-20221023140121313.png">
<pre><code class="language-jsx"><body>
<div id="ctx"></div>
<script src="../newjs/react.development.js"></script>
<script src="../newjs/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>

<script src="../js/prop-types.js" type="text/javascript"></script>
<script type="text/babel">
   class Count extends React.Component {

         constructor(props) {
            console.log('Count-constructor')
            super(props)
            this.state = {
               count: 0
            }
         }
         add = () => {
            const {count} = this.state
            this.setState({
               count: count+1
            })
         }
         death = () => {
            ReactDOM.unmountComponentAtNode(document.getElementById('ctx'))
         }
         force = () => {
            this.forceUpdate()
         }
         // 在更新之前获取快照，方法返回值将会作为参数传递给componentDidUpdate钩子
         getSnapshotBeforeUpdate () {
            console.log('getSnapshotBeforeUpdate')
            return 'liergou'
         }
         // getDerivedStateFromProps方法的返回值会作为state的值
         static getDerivedStateFromProps (props, state) {
            console.log('getDeriverdStateFromProps', props, state)
            return null
         }
         componentDidMount() {
            console.log('Count-componentDidMount')
         }
         shouldComponentUpdate() {
            console.log('Count-shouldComponentUpdate')
            return true
         }
         componentDidUpdate(preProps, preState, snapshotValue) {
            console.log('Count-componentDidUpdate', preProps, preState, snapshotValue)
         }
         componentWillUnmount() {
            console.log('Count-componentWillUnmount')
         }

         render() {
            console.log('Count-render')
            const {count} = this.state
            return (
               <div>
                     <h2>当前求和为: {count}</h2>
                     <button onClick={this.add}>点我+1</button>
                     <button onClick={this.death}>卸载组件</button>
                     <button onClick={this.force}>强制更新</button>
               </div>
            )
         }
   }
   ReactDOM.render(<Count age={88}/>, document.getElementById('ctx'))
</script>
</body>
</code></pre>
<h4 id="26-虚拟dom与dom-diff算法">2.6 虚拟DOM与DOM Diff算法</h4>
<blockquote>
<p>https://segmentfault.com/a/1190000012921279</p>
</blockquote>
<h2 id="第三章react应用基于react脚手架">第三章：React应用(基于React脚手架)</h2>
<h2 id="第四章react-ajax">第四章：React ajax</h2>
<h2 id="第五章react-router">第五章：React-router</h2>
<h2 id="第六章react-ui-组件库">第六章：React UI 组件库</h2>
<h2 id="第七章redux">第七章：Redux</h2><br><br>
来源：https://www.cnblogs.com/bwqueen/p/16863566.html

頁: [1]

琼殿技术论坛's Archiver

React 全家桶-React基础