React 面向组件化编程 - 封装了webpack - npm run build 产生的包的 /static 引用路径问题

React 面向组件化编程

面向对象 ----> 面向模块 ----> 面向组件

套路：

注意:

组件名必须大写开头；

只能有一个根标签；

<input />虚拟DOM 元素必须有结束标签

方式1. 工厂函数组件 (简单组件) ----> 只能定义无状态的组件

• function MyComponent(){    // 只能 大写开头，区别于普通函数
      return <h2>工厂函数组件(简单组件)</h2>
  }
  
  // 渲染函数组件标签
  // 内部直接调用 工厂组件函数 得到虚拟组件函数
  ReactDOM.render(<MyComponent/>, document.getElementById("outer"))

方式2： ES6 类组件 (复杂组件)

• class MyComponent2 extends React.Component {
      // 1. 必须继承
      // 2. 必须大写开头
      // 3. 必须重写 render 方法, 指定 return 返回值
      render (){
          return <h2>ES6类组件(复杂组件)</h2>
      }
  }
  
  // 渲染类组件标签
  // 内部会自动创建类的实例，并调用其 render() 方法得到需要渲染的虚拟 DOM
  ReactDOM.render(<MyComponent/>, document.getElementById("outer"));
  //              获取到虚拟 DOM 对象       页面上的 原生 DOM

组件的三大属性：

面试题： 区别一下组件的 props 和 state 属性

相同点： 都是组件实例的对象，用于保存数据

不同点：

state 保存组件自身内部可变化的数据

props 保存从外部传入组件内部的数据，组件内部只读而不修改

• state 对象

是组件对象最终要的 属性，属性值是一个对象 (可以包含多个)

组件被称为 "状态机"

更新状态 从而 更新界面 ----> this.setState({stateName1 : newValue})

this.state 是组件私有的，通过调用 this.setState() 来改变它

this.setState() 每次修改以后，自动调用 this.render 方法，再次渲染组件

可以通过 getInitialState() 方法初始化，在组件的生命周期中仅执行一次

• var FavoriteButton=React.createClass({
    getInitialState:function(){
      return {favorite:false};
    },
    handleClick:function(event){
      this.setState({favorite:!this.state.favorite});
    },
    render:function(){
      var text=this.state.favorite? 'favorite':'un favorite';
      return (
        <div type='button' onClick={this.handleClick}>
          You {text} this. Click to toggle.
        </div>
      );
    }
  });
  ---------------------
  作者：CrazyCodeBoy
  来源：CSDN
  原文：https://blog.csdn.net/fengyuzhengfan/article/details/52185921
  版权声明：本文为博主原创文章，转载请附上博文链接！

当 state 更新之后，组件就会重新渲染自己。

render() 方法依赖于 this.props 和 this.state ，

框架会确保渲染出来的 UI 界面总是与输入（ this.props 和 this.state ）保持一致

实例： iLikeQuQ

• class Like extends React.Component {    // 组件类
      constructor(props){
          super(props)
          this.state = {isLikeMe: false}
      }
      
      // 组件中自定义的方法的 this 默认指向 undefined
      // 利用 箭头函数 没有自己的 this 来 在函数内使用 this
      // 若要 更新组件的显示，必须使用 组件的 setState()
      chgText = ()=>{
          // this.state.isLikeMe = !this.state.isLikeMe    无效操作
          this.setState({
              isLikeMe: !this.state.isLikeMe
          })
      }
  
      render(){
          const isLikeMe = this.state.isLikeMe
          const text =  isLikeMe?"I Like U.":"U Like Me."
          return <h2 onClick={this.chgText}>{text}</h2>
      }
  }
  ReactDOM.render(<Like/>, document.getElementById("outer"));

每次点击，改变了 状态，那么就会自动重新调用 render() 方法

props 对象

每个组件只会根据 props 渲染了自己一次，props 是不可变的

<script src="https://cdn.bootcss.com/prop-types/15.6.2/prop-types.js"></script>

• class Person extends React.Component {
      /**** 默认会执行
      constructor (props){
          super(props);    // props 包含了组件标签的所有属性数据
      }
      ****/
  
      render(){
          const {name, age, sex} = this.props;
          return ({
              <ul>
                  <li>姓名: {name}</li>
                  <li>年龄: {age}</li>
                  <li>性别: {sex}</li>
              </ul>
          })
      }
  }
  // this.props.xxx    // 1. 读取属性名 xxx 对应的 属性值
  Person.propTypes = {    // 2. 设置 props 中属性的约束条件
      name: PropTypes.string.isRequired    // 必须传参，且 string
  }
  
  Person.defaultProps = {    // 3. 设置 props 中属性的默认值
      age: 18,
      sex: "未知"
  }
  
  /**************************************/
  const sun = {
      name: "孙悟空",
      age: 550,
      sex: "男"
  }
  
  // name 被 isRequired 修饰，必须传，且类型必须为 string
  ReactDOM.render(<Person name={sun.name} age={sun.age} sex={sun.sex}/>, document.getElementById("outer"));
  
  // ReactDOM.render(<Person {...sun}/>, document.getElementById("outer"));    // 简化写法

优化为： （propTypes, defaultProps , state 不需要给实例对象直接调用）

• class Person extends React.Component {
      // 1. 给组件对象 设置 state 属性
      state = {
          isLikeMe: false
      }
  
      // 给类添加 属性，只能 类 内部调用
      // 2. 设置 props 中属性的约束条件
      static propTypes = {
          name: PropTypes.string.isRequired    // 必须传参，且 string
      }
  
      // 3. 设置 props 中属性的默认值
      static defaultProps = {
          age: 18,
          sex: "未知"
       }
  
      render(){
          const {name, age, sex} = this.props;
          return ({
              <ul>
                  <li>姓名: {name}</li>
                  <li>年龄: {age}</li>
                  <li>性别: {sex}</li>
              </ul>
          })
      }
  }
  
  /**************************************/
  const sun = {
      name: "孙悟空",
      age: 550,
      sex: "男"
  }
  
  // name 被 isRequired 修饰，必须传，且类型必须为 string
  ReactDOM.render(<Person {...sun}/>, document.getElementById("outer"));    // 简化写法

refs 对象

• // 组件对象 refs 保存的是 ref 关联的虚拟 DOM 元素
  // refs {属性: 属性值}
  // refs {ref 的值: 对应的 DOM 元素对象}
  // refs {"left": <input>元素对象}
  class MyComponent extends ReactComponent {
      hint = ()=>{
          console.log(this.refs.left.value);
      }
  
      handleBlur = (event)=>{
          // console.log(this.refs.right.value);
          console.log(event.target.value);
      }
  
      render(){
          return ({
              <div>
                  <input type="text" ref="left"/>
                  <button onClick={this.hint}></button>
                  <input type="text" ref="right" onBlur={this.handleBlur} />
              </div>
          })
      }
  }
  
  ReactDOM.render(<MyComponent/>, document.getElementById("oouter"))

• 外部 向 组件对象 传入 props 的两种方式
• 传不确定的 数据

ReactDOM.render(<Person name={sun.name} age={sun.age} sex={sun.sex}/>, document.getElementById("outer"));

• 传不确定的 虚拟 DOM

传一个 虚拟 DOM 标签，组件.props.children

传多个 虚拟 DOM 标签，组件.props.children[{...},{...}...]

• 相关概念：

程序： 是对现实世界的模拟

• jsx 需要注意的地方：

class 必须用 className 代替

style 的属性值必须 {{"color":"red", "font-size": "16px"}}

• 组件的事件处理方式

1. 箭头函数的方式

2. 初始化执行 constructor() 时，bind 绑定 this 从而产生一个新的函数，指向组件对象

• 出现警告：

You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.

解决：

使用 defaultValue 代替 value

• 实时显示用户输入数据

• <!DOCTYPE html>
  <html>
      <head>
          <meta charset="UTF-8" />
          <title>Hello React</title>
  
          <link rel="stylesheet" type="text/css" href="./css/index.css" />
      </head>
  
      <body>
          <div id="outer"></div>
  
          <!-- javascript 代码 -->
          <script src="https://cdn.bootcss.com/react/16.7.0/umd/react.development.js"></script>
          <script src="https://cdn.bootcss.com/react-dom/16.7.0/umd/react-dom.development.js"></script>
          <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.js"></script>
          <script type="text/babel">
              class ButtonText extends React.Component {    // 组件类
                  hint = ()=>{
                      alert("left :  "+this.refs.left.value)
                  }
                  centerInfo = (event)=>{
                      this.refs.tips.innerHTML = event.target.value
                  }
                  handleBlur = (event)=>{
                      console.log("right :  "+event.target.value)
                  }
                  render(){
                      return (
                          <div>
                              <div>
                                  <label>
                                      <input type="text" ref="left" defaultValue="Come on!"/>
                                  </label>
                                  <label>
                                      <input type="text" ref="center" onKeyUp={this.centerInfo}/>
                                  </label>
                                  <label>
                                      <input type="text" ref="right" onBlur={this.handleBlur}/>
                                  </label>
                              </div>
                              <button onClick={this.hint}>Tips</button>
                              <p ref="tips">Hello there.</p>
                          </div>
                      )
                  }
              }
  
              ReactDOM.render(<ButtonText/>, document.getElementById("outer"));
          </script>
      </body>
  </html>

代码地址 ： kiss me.

问题： 在 create-react-app 之后的项目，进行 npm run build 时，发现是 用了 "/" 绝对路径，以致于找不到路径

解决： 找到 node_modules/react-scripts/config/paths.js 第 45 行修改 "/" 为 "./"

个人 './' 与 '/' 愚见，觉得 './' 更好，为什么官方设计是 /这样的绝对路径呢？