1、深入浅出React（一）

2024年3月10日 166次阅读 来源: keywords

深入浅出React（一）

1、create-react-app东西运用

  1. 装置create-react-app

    npm install create-react-app -g

  2. 建立项目

    creact-react-app demos
cd demos
npm start
  3. 剖析运用

package.json

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject"
}

npm start启动开辟环境，npm run build建立临盆环境优化代码，npm test用于测试单位，npm run eject把潜藏在react-scripts中的一序列手艺栈“弹射”到
运用的顶端，此敕令不可逆且会转变和增添一些文件。

2、react新的前端头脑形式

  • 数据驱动衬着
  1. 开辟者不需要像jQuery一样细致的操纵DOM着重于‘如何去做’,只需要着重于“我要显现什么”，而不必费心“如何去做”;
  2. react理念UI = reader（data）
  1. 用户看到的界面（UI），是一个 纯函数（render） 的实行效果，只接收数据（data）作为参数；
  2. 纯函数：没有任何副作用，输出完整依赖于输入的函数；
  3. 关于react开辟者，主要的是辨别哪些属于data，哪些属于render，要更新界面，要做的就是更新data；
  4. react实践的也是”相应式编程”的头脑。
  • 3、Virtual DOM
  1. 每次render函数被挪用，都要把全部组件重新衬着一遍会糟蹋，而react对此应用Virtual DOM，让每次衬着都只重新衬着起码的DOM;
  2. DOM树：HTML是组织化文本，而DOM是组织化文本的笼统表达形式，浏览器在衬着HTML花样网页时，会先将HTML文本剖析以构建DOM树，然后依据DOM树渲衬着出用户看到界面，当转变内容时，就去转变DOM树上的节点；
  3. 虽然DOM树只是一些简朴的JavaScript语句，但DOM操纵会引起浏览器对网页的重新规划和绘制，所以Web前端开辟优化准绳之一： 只管较少DOM操纵 ；
  4. react开辟会中jsx语句，将被Babel剖析为建立React组件或HTML元素的语句，但React并不会经由过程其直接构建或操纵DOM树，而是先构建Virtual DOM；
  5. DOM树是对HTML的笼统，而Virtual DOM是对DOM树的笼统；
  6. Vritual DOM不触及浏览器，只存在于JavaScript空间的树形组织，每次自上而下的衬着React组件时，都邑对照此次发生的Vritual DOM和上一次发生的，然后真正的DOM树只需要操纵有差异的部份。
  • 4、JSX
  1. JSX: 是JavaScript的语法扩大，许可我们在JavaScript中编写HTML一样的代码，终究会编译成一般的JavaScript语句；

  2. 属性运用

    • 自定义属性data-*;
    • class和for为JavaScript保存关键字，所以class和for属性运用className和htmlFor;

  3. JavaScript表达式运用

    • JSX许可在闭合标签中运用JavaScript表达式，但必须用{}包裹；
    • JavaScript表达式请求必须有 返回值 ，所以不能直接运用 if else 语句，但可以运用三元操纵表达式和&&，||如许的比较运算符来誊写；
    • 假如确切需要运用 if else语句，可以写在函数中，然后在{}中挪用。

  4. 款式

    • 经由过程style属性定义，单属性值不能是字符串只能是对象，且属性名需要运用驼峰定名法（font-size变成fontSize）。

  5. 解释

    • 标签内注重需要写在{}中。

  6. 数组

    • JSX中的数组会自动睁开；
    • 注重假如数组或迭代器中的每一项都是HTML标签或组件，那末它们必需要具有唯一的key属性，如许有助于React的DIFF算法，完成最高效的DOM更新。

  7. 事宜挂载

    • JSX中可以经由过程onClick（HTML原生为onclick）

    • HTML直接运用onclick瑕玷：

      1. onclick增加的事宜处置惩罚函数是在全局环境下实行，污染全局环境，轻易发生意想不到的效果；
      2. 给许多DOM元素增加onclick事宜，可以会影响网页的机能；
      3. 关于运用onclick的DOM元素，假如要动态的从DOM树种删除，需要把对应的事宜处置惩罚器注销，不然可以形成内存走漏。

    • JSX中的onClick事宜（不存在以上题目）

      1. onClick挂载的每一个函数都可以掌握在组件中，不会污染全局空间；
      2. JSX中onClick没有发生直接运用onclick的HTML，而是运用了 事宜托付 体式格局处置惩罚，不管有多少个onClick涌现，实在末了都只在DOM树上增加了一个事宜处置惩罚函数，挂在最顶层的DOM节点上。
      3. 一切的点击事宜都被这个事宜处置惩罚函数捕捉，然后依据详细组件分配给特定函数，所以机能较高；
      4. 因为React掌握了组件的性命周期，在unmount的时刻可以消灭相干的一切事宜处置惩罚函数，内存走漏题目解决。
      function Demo(){
  const name = 'jsx';
  const arr = [
    <h3 key = {0}>数组</h3>
    <p key = {1}>数组会自动睁开，注重增加key属性</p>
  ];
  const func = () => {
    let result = 'hello';
    if (name){
      result += name;
    } else {
      result += 'world';
    }
    return result;
  };
  return (
    <div>
      <h2></h2>
      {/*解释*/}
      <p style = {{color: 'red',fontSize: '14px'}}>hello {name || 'world'}</p>
      <p className = {name ? 'classA' : 'classB'}>
        hello {name && 'world'}
      </p>
      <p>
        {func()}
      </p>
      {arr}
    </div>
  )
}

3. React数据

  • React的prop

    1. prop(property的简写)是从外部通报给组件的数据，一个组件经由过程定义本身可以接收的prop就定义了本身的对外大众接口；
    2. 每一个React组件都是自力存在的模块，组件以外的一切都是外部天下，外部天下就是经由过程prop来和组件对话的。

    • 给prop赋值

      class Demo extends Component{
  render(){
    return(
      <div>
        <Child caption = "toProp" initValue = {0}/>//给子组件<Child />传入caption和initValue信息，子组件需定义相干prop接口
      </div>
    )
  }
}

    • 读取prop值

      1. 给this.prop赋值是React.Component组织函数的事情之一；
      2. 假如一个组件需要定义本身的组织函数，肯定要在组织函数的第一行super挪用父类也就是React.Component的组织函数；
      3. 假如没有在组织函数中挪用super(props)，那末组件实例被组织以后，类实例的一切成员就没法经由过程this.props接见到父组件通报过来的props值。
      class Child extends Component{
  constructor(props){
    super(props);
    this.state = {
    //猎取外部传入的prop，并用于state初始化
      count: props.initValue || 0,
      caption: props.caption
    }
  }
}

    • propTypes搜检

      1. prop是组件的对外接口，所以一个组件该声明本身的接口范例，范例组件支撑哪些prop，每一个prop该是什么样的花样；
      2. React经由过程propTypes来范例，因为propTypes已从React包中分离出来，所以新版React中没法运用React.PropTypes.*,需导入prop-types
        即装置：npm install prop-type --save导入import PropTypes from ('prop-types')

      3. propTypes考证器

        1. JavaScript基础范例：

          PropTypes.array

          PropTypes.bool

          PropTypes.func

          PropTypes.number

          PropTypes.object

          PropTypes.string

        2. 可以被衬着为子节点的对象，包含数值、字符串ReactElement（指的是JSX中的闭合标签）或数组：
          PropTypes.node
        3. ReactElement

          PropTypes.element

        4. 指定类的实例

          PropTypes.instanceOf(Message)

        5. 只接收指定的值：

          PropTypes.oneOf(['News','Photos'])

        6. 多个对象范例中的一个：

          PropTypes.oneOfType([
          PropTypes.string,
          PropTypes.number,
          PropTypes.instanceOf(Message)
          ])

        7. 指定范例组成的数组：

          PropTypes.arrayOf(PropTypes.number)

        8. 指定范例的属性组成的对象：

          PropTypes.objectOf(PropTypes.number)

        9. 相符指定花样的对象：

          PropTypes.shape({
          color: PropTypes.string,
          fontSize: PropTypes.number
          })

        10. 在恣意范例上加上isRequired使其不为空：

          PropTypes.func.isRequired 

eg:

Child.propTypes = {
  initValue: PropTypes.number,
  caption: PropTypes.string
  
}
  • React的state

  1. state代表组件的内部状况，因为React组件不能修正传入的prop，所以需要运用state纪录本身数据变化；

    • state初始化

      constructor(props){
 ...
 this.state = {
   count: props.initValue || 0
 }
}

      注重：运用React.createClass要领建立出来的组件类，经由过程getInitialState要领猎取初始值，但这类要领已被烧毁。

    • 读取和更新state

      1. 读取this.state
      2. 更新this.setState({})

注重：不要直接修正this.state的值，虽然可以转变组件的内部状况，但只是蛮横的修正了state，却不会驱动组件重新衬着，所以变化不会反应到界面
而，this.setState()所做的事是先转变this.state的值，然后驱动组件更新

  • prop和state对照

    1. prop用于定义外部接口，state用于纪录内部状况；
    2. prop的赋值在外部天下运用组件时，state的赋值在组件内部；
    3. 组件不应该转变prop的值，而state的存在就是为了让组件来转变。
  • React的context
  1. 运用prop给内部子组件通报数据时需要一层一层的通报，纵然中心有组件不需要运用，如许比较贫苦；

  2. 运用context可以完成跨级通报。

    • context运用步骤

      1. 父组件经由过程getChildContext()要领将需要传入的信息放进context，并声明childContextTypes（假如不声明没法再组件中运用getChildContext()）;
      2. 要运用的子组件中经由过程声明contextTypes（需要和父组件一致）就可以经由过程组件实例的context属性接见接收到的数据；
      3. 无状况的组件可以在函数参数中猎取context；而又状况的组件可以经由过程this.context和性命周期函数猎取context。

eg:
父组件

class Parent extends React.Component{
  getChildContext(){
    return {color: "red"}      
  }
  
  render(){
    return(
      <div>
        <Child />
      </div>
    )
  }
}

Parents.childContextTypes = {
  color: PropTypes.string.isRequired
}
(有状况)子组件：
 class Child extends React.Component{
   render(){
     return(
       <div>
         <p style = {{color:{this.context.color}}}>有状况的组件可以经由过程this.context猎取</p>
         <Grandchild />
       </div>
     )
   }
 }
 
 Child.contextTypes = {
   color: PropTypes.string.isRequired
 }
(无状况)孙子组件：
 function Grandchild(context){
   return(
     <p style = {{color: {context.color}}}>无状况组件可以直接在函数的参数中猎取</p>
   )
 }
 
 Grandchild.contextTypes = {
   color:PropTypes.string.isRequired
 }

不积跬步，何故行千里

  • 延续加载中…..
    原文作者：keywords
    原文地址: https://segmentfault.com/a/1190000013430035
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞