React 学习笔记

• • Hello World
  • JSX (JavaScript XML) 语法规则
  • JavaScript 语法
  • 函数组件、类组件 & 属性 props
  • • 组合组件
  • 生命周期函数 & 状态 state
  • 事件处理
  • refs
  • 受控组件、非受控组件 & 高阶函数、函数的柯里化
  • npm
  • 参考

Hello World

JSX (JavaScript XML) 语法规则

1. 定义虚拟D0M时，不要写引号。
2. 标签中混入JS表达式时要用}。
3. 样式的类名指定不要用class,要用className。
4. 内联样式，要用style={key:value}的形式去写。
5. 只有一个根标签
6. 标签必须闭合
7. 标签首字母1. 若小写字母开头，则将改标签转为htl中同名元素，若htm1中无该标签对应的同名元素，则报错。2. 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

JavaScript 语法

1. console.log(2, "@");

2. debugger;

3. JSON
   JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串
   JSON.parse () 方法用来解析 JSON 字符串，构造由字符串描述的 JavaScript 值或对象。

    JSON.stringify({name:"zhangsan",age:18}) // '{"name":"zhangsan","age":18}'JSON.parse('{"name":"zhangsan","age":18}') // {name: 'zhangsan', age: 18}
   

4. 类中方法默认开启局部严格模式，所以类中自定义方法中的 this 是 undefined，而不是类的实例对象！

   

函数组件、类组件 & 属性 props

React 对象三大属性1：props

组合组件

生命周期函数 & 状态 state

React 对象三大属性2：state

• 组件生命周期函数

  • componentDidMount 组件已被渲染到 DOM 中后调用
  • componentWillUnmount 组件将卸载时调用

• state 使用注意事项

  • 只能在构造函数或类属性上初始化 state

  • 只能使用 this.setState(函数或对象) 更新状态数据，直接更新 state 状态数据无效！

  • state 的更新可能是异步的。出于性能考虑，React 可能会把多个 setState() 调用合并成一个调用。因为 this.props 和 this.state 可能会异步更新，所以你不要依赖他们的值来更新下一个状态。

    // Wrong
    this.setState({counter: this.state.counter + this.props.increment,});
    }// Correct
    this.setState((state, props) => ({counter: state.counter + props.increment
    }));// Correct
    this.setState(function (state, props) {return {counter: state.counter + props.increment};
    });
    

  • state 的更新会被合并
    当你调用 setState(对象) 的时候，React 会把你提供的对象合并到当前的 state。

  • 除了拥有并设置 state 的组件之外，其他组件都无法访问该 state。不过，组件可以选择把它的 state 作为 props 向下传递到它的子组件中。

事件处理

https://zh-hans.reactjs.org/docs/handling-events.html

React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同：

1. React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
2. 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。如 onChange={this.saveUsername}，其含义为：大括号中同 js语法，将大括号中结果（此处结果为一个函数）赋值给onChange，React 负责调用onChange。
3. 在 React 中不能通过返回 false 的方式阻止默认行为，必须显式的使用 preventDefault 。

原生js事件，注意浏览器地址栏URL变化
原生js通过返回false阻止默认事件

refs

React 对象三大属性3：DOM 节点引用 refs

受控组件、非受控组件 & 高阶函数、函数的柯里化

npm

npm（“Node 包管理器”）是 JavaScript 运行时 Node.js 的默认程序包管理器。
npm 由两个主要部分组成:用于发布和下载程序包的 CLI（命令行界面）工具托管 JavaScript 程序包的  在线存储库

参考

• React 官方中文教程
• ES6 入门教程
• Babel 官网
• 尚硅谷 React 视频教程
• 什么是 npm —— 写给初学者的编程教程