React基础

原课程链接->React16.4开发简书项目从零基础入门到实战

第1章课程导学

React基础_第1张图片
React基础_第2张图片

第2章React初探

2-1React简介

  1. 建议官网:https://reactjs.org/docs/
  2. React基础_第3张图片
    React基础_第4张图片

2-2React开发环境

  • 安装
    1. npm install -g create-react-app
    2. create-react-app myapp --> myapp为项目名
    3. cd myapp
    4. npm start -->自动运行并打开网页

2-3工程目录文件介绍

  1. PWA

    PWA:progressive web application
    大致意思就是通过写网页的方式来写一下手机APP的应用

  2. serviceWorker: 这个serviceWorker就是帮助我们实现类似PWA的功能
    • 主要功能就是:假设一个支持https协议的服务器上,我们第一次访问我们写好的网页,是需要联网的,但是之后某次访问,断网了,那么依旧支持读取之前访问过的那个网页,它可以帮助存储网页在浏览器之中React基础_第5张图片
  3. 目录介绍
    React基础_第6张图片

2-4React中的组件

  1. 组件化的概念
    React基础_第7张图片
  2. 详解index.js
    • src/index.js
      // 4. 引入react  ->  编译jsx语法
      import React from 'react';
      import ReactDOM from 'react-dom';
      // 1. 引入App组件
      // 注意:如果我们要使用自己创建的组件,组件和标签开头一定以大写字母开头,否则不支持识别,小写的标签一般都是h5标签
      import App from './App';
      
      // 2. ReactDOM.render:将某个组件挂载到某个节点上
      ReactDOM.render(
        <React.StrictMode>
          {/* 3. 是一种JSX语法:通过标签,
          而不是直接写App引用。 但是这种语法需要react去编译,
          所以第一行引入react */}    
          <App /> 
        </React.StrictMode>,
        document.getElementById('root')
      );
      
    • src/App.js
      import React from 'react';
      function App() {
        return (
          // 5. 这个div也是一种JSX语法,所以需要引入React
          <div className="App">
           hello
          </div>
        );
      }
      
      export default App;
      
      • JSX大致意思就是在js中写html内容的语法
        • 注意: 如果我们要使用自己创建的组件,组件和标签开头一定以大写字母开头,否则不支持识别,小写的标签一般都是h5标签
    1. public/index.html
          <body>
              <!-- 容错代码,如果未开启javascript,那么提醒用户 -->
              <noscript>You need to enable JavaScript to run this app.</noscript>
              <div id="root"></div>
          </body>
      

第3章React基础精讲

3-1使用React编写TodoList功能

  1. 组件中return的部分,最外层只能有一个元素
        import React from 'react';
        function App() {
          return (
            // 正确
            <div>
              <div>b</div>
            </div>
    
            // 错误
            <div>a</div>
            <div>b</div>
          );
        }
    
        export default App;
    
    
  2. 如果不需要最外层的div显示出来,那么可以使用Fragment
        import React, { Fragment } from 'react';
        function App() {
          return (
            // 正确
            <Fragment>
              <div>b</div>
            </Fragment>
          );
        }
        export default App;
    

3-2React中的响应式设计思想和事件绑定

  1. 实现一个小功能,input输入框实时改变
        import React, { Component, Fragment } from 'react';
        class TodoList extends Component {
          // 当我们去使用组件的时候,constructor是优于其他任何函数,会自动的,最先被执行的函数
          constructor(props){
            // 调用一次父类(Component)的构造函数
            super(props);
            // react中定义数据,定义在状态里面也就是state
        // 第1步:设置inputValue初始值    
            this.state = {
              inputValue: '',
              list: [],
            }
          }
          render() {
            return (
              // 正确
              <Fragment>
                <div>
                  {/* 当state中数据改变,input输入框中的内容同步改变,这就是响应式,也是react名字的起源 */}
                  <input 
        // 第2步:onChange监听
                  onChange={this.handleInputChange.bind(this)}
        // 第4步:inputValue实时更新
                  value={this.state.inputValue}/>
                  <button>提交</button>
                </div>
                <ul>
                  <li>learn hard</li>
                  <li>study up</li>
                </ul>
              </Fragment>
            );
          }
          handleInputChange(e){
            // e.target指的是dom结点
            console.log(e.target.value);
            // 如果input上 不利用bind改变this指向,那么这个this应为undefined
            console.log(this);
        // 第3步:state中数据改变
            this.setState({
              inputValue: e.target.value,
            })
          }
        }
    
        export default TodoList;
    
    

3-3实现TodoList新增删除功能

  1. 新增功能:代码为上面代码,新添部分如下
    1步:
        this.state = {
          inputValue: '',
          list: [],
        }2步:渲染list数组
        <ul>
         {
           this.state.list.map((item, index)=>{
             return <li key={index}>{item}</li>
           })
         }
        </ul>3步:提交按钮绑定事件-改变this.state.list
        <button onClick={this.handleBtnClick.bind(this)}>
            提交
        </button>4步:
        handleBtnClick(e){
           this.setState({
             list: [...this.state.list, this.state.inputValue],
             inputValue: '',
           }) 
        }
    
  2. 删除功能:部分代码参考上面,新添如下
    1步:给li绑定事件,点击li传递index给函数
            <ul>
             {
               this.state.list.map((item, index)=>{
                  return (
                    <li 
                      key={index} 
                      onClick={this.handleItemDelete.bind(this, index)}
                    >  
                      {item}
                    </li>
                  )
               })
             }
            </ul>2步:删除方法
            handleItemDelete(index){
                let list = [...this.state.list];
                list.splice(index, 1);
                this.setState({
                  list,
                })
            }
    
    • react中有个immutable概念,指的就是不允许我们做任何改变,例如
          this.state.a = 'a';
      

3-4JSX语法细节-样例参考上面

  1. 注释
    {/*     这是多行注释     */}
    {//     这是单行注释       }
    
  2. 定义样式
    • 定义style.css文件
          .input{
              border: 1px solid red;
          }
      
    • 添加’input’类名到input标签
      1步:
              import './style.css';2步:注意是className不是class,因为js文件中class是有其他意义的
               <input className='input'/>
      
  3. 要求:input框中输入

    hello

    后,点击提交,出现样式为大大的hello,而不是

    hello

        <ul>
         {
           this.state.list.map((item, index)=>{
              return (
                <li 
                  key={index} 
                  onClick={this.handleItemDelete.bind(this, index)}
        // 可以将输入值作为html输出,其中第一个括号,表示{}中是JS表达式,{}中的{}代表JS表达式是一个对象,对象值是{__html: item},item表示遍历list的值
                  dangerouslySetInnerHTML={{__html: item}}
                >  
                </li>
              )
           })
         }
        </ul>
    
  4. 扩大input输入框的点击区域
    • 利用label
      1步:
              {/* label作用就是可以扩大点击区域,注意:不使用for属性而是使用htmlFor for在js中有单独含义*/}
              <label htmlFor="insertArea">输入内容</label>2步:input添加id
      	    <input id="insertArea"/>
      

3-5拆分组件与组件之间的传值

  1. 组件其实展现的是一个树形的结构,大组件包含若干小组件,小组件又会拆分为若干个更小的组件
  2. 父组件向子组件传值:通过属性的形式传递
        父组件传值:
            <TodoItem content={item}/>
        子组件接收:
            <div>
                {this.props.content}
            </div>
    
  3. 子组件改变父组件的值:通过子组件调用父组件的方法(子组件不允许直接修改父组件的内容)
        将父组件的方法传递给子组件:
            注意:必须利用bind强制改变this指向父组件,否组子组件的this找不到这个方法
            <TodoItem 
              deleteItem={this.handleItemDelete.bind(this)}
            />
        子组件接收:
            handleClick(){
                this.props.deleteItem(this.props.index);
            }
    

3-6TodoList代码优化-React语法规范

  1. 利用解构赋值简化
        原:
            this.props.deleteItem(this.props.index);
        优化:
            const { deleteItem, index } = this.props;
            deleteItem( index);
    
  2. 一般先引入组件,后引入样式
        原:
            import './style.css';
            import TodoItem from './TodoItem';
        优化:
            import TodoItem from './TodoItem';
            import './style.css';
    
  3. 关于改变this指向,正确的位置应在constructor中
        原来的方法:
            <div onClick={this.handleClick.bind(this)}>
                {this.props.content}
            </div>
        优化的方法:在constructor中改变
            constructor(props){
                super(props);
                this.handleClick = this.handleClick.bind(this);
            }
    
  4. 标签属性过多,导致代码太长可以改为如下样式
        <input 
            className='input'
            onChange={this.handleInputChange}
            value={this.state.inputValue}
            id="insertArea"
        />
    
  5. 当标签中逻辑过多时,可以将逻辑单独提炼出来
        <ul>
         { this.getTodoItem() }
        </ul>
    
        getTodoItem(){
            return (
              this.state.list.map((item, index)=>{
                return (
                  <div>
                    <TodoItem 
                      content={item} 
                      index={index}
                      deleteItem={this.handleItemDelete}
                    />
                  </div>
                )
             })
            )
        }
    
  6. 改变state中数据的值新旧新写法
        之前的写法:
            this.setState({
              inputValue: e.target.value,
            })
        现在的写法:
            const value = e.target.value
            this.setState(() => {
              return {
                inputValue: value,
              }
            })ES6语法优化:
            const value = e.target.value
            //箭头后面的括号其实是简化了return的写法,括号中的内容就是return返回的内容
            this.setState(() => ({
                inputValue: value,
              }
            ));
    
  7. setState方法参数:prevState->指的是修改数据之前的那次数据是什么样的
        this.setState((prevState) => ({
            // list: [...this.state.list, this.state.inputValue],
            list: [...prevState.list, prevState.inputValue],
            inputValue: '',
        }));
    
  8. ToDoItem组件的key值问题,先暂时利用index作为key值,但是用index做key值不是可取的方法!!!
        <TodoItem 
            key={index}
        />
    
  9. 注意:如果有多个子组件,应该把key放在每个独立子组件最外层的标签,比如说如下情况,key值不应该放在ToDoItem标签上,而是放在div上
        this.state.list.map((item, index)=>{
            return (
        //放在独立子组件最外层div上:正确
              <div key={index}>
        //放在TodoItem上:错误
                <TodoItem key={index}/>
              </div>
            )
         })
    

3-7围绕React衍生出的思考

React基础_第8张图片

你可能感兴趣的:(react)