龙哈哈_4b89
龙哈哈_4b89

React学习记录

源文链接：https://zh-hans.reactjs.org/docs/composition-vs-inheritance.html

Hello World

ReactDOM.render(

Hello, world!

,
document.getElementById('root')
);

JSX

一个 JavaScript 的语法扩展.。

  1. const name = 'Josh Perez';
    const element =

    Hello, {name}

    ;
  2. 在 JSX 语法中，你可以在大括号内放置任何有效的 JavaScript 表达式。例如，2 + 2，user.firstName 或 formatName(user) 都是有效的 JavaScript 表达式。
  3. JSX 也是一个表达式。

元素渲染

1.React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI。根据我们已有的知识，更新 UI 唯一的方式是创建一个全新的元素，并将其传入 ReactDOM.render()。

  1. React 只更新它需要更新的部分。

组件 & Props

  1. 定义组件最简单的方式就是编写 JavaScript 函数：
function Welcome(props) {
  return 
Hello, {props.name}
;
}
  1. 你同时还可以使用 ES6 的 class 来定义组件：
class Welcome extends React.Component {
  render() {
    return 
Hello, {this.props.name}
;
  }
}

3.Props 的只读性。所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。
4.渲染组件

function Welcome(props) {
  return 
Hello, {props.name}
;
}

const element = ;
ReactDOM.render(
  element,
  document.getElementById('root')
);

State & 生命周期

  1. 不要直接修改 State。（this.setState）
  2. State 的更新可能是异步的。
  3. State 的更新会被合并。
  4. 数据是向下流动的。

事件处理

  1. React 事件的命名采用小驼峰式（camelCase），而不是纯小写。使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。
  2. this.handleClick = this.handleClick.bind(this);bind绑定this

条件渲染

React 中的条件渲染和 JavaScript 中的一样，使用 JavaScript 运算符 if 或者条件运算符去创建元素来表现当前的状态，然后让 React 根据它们来更新 UI。

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return ;
  }
  return ;
}

ReactDOM.render(
  // Try changing to isLoggedIn={true}:
  ,
  document.getElementById('root')
);

在极少数情况下，你可能希望能隐藏组件，即使它已经被其他组件渲染。若要完成此操作，你可以让 render 方法直接返回 null，而不进行任何渲染。

列表&Key

  1. key 只是在兄弟节点之间必须唯一
  2. key 会传递信息给 React ，但不会传递给你的组件。如果你的组件中需要使用 key 属性的值，请用其他属性名显式传递这个值。即props.key读取不到key的值。

表单

受控组件
  1. ,