React学习1——核心概念_react actionlink

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

React 元素是不可变的，一旦被创建，你就无法更改它的子元素或者属性。因此，想要更新UI只能重新渲染，即再次执行ReactDOM.render()（当然不止这种方式，class组件中的render也是）。注意每一次执行ReactDOM.render()，React
DOM会只更新变化的部分（只进行必要的更新）。

4. 组件 & Props

组件：传入props，传出React元素

函数组件

function Welcome(props) {
	return <h1>Hello, {props.name}</h1>;
}

class组件

class Welcome extends React.Component {
	render() {
		return <h1>Hello, {this.props.name}</h1>;
	}
}

• 组件名称必须以大写字母开头
• 纯函数定义：不会更改入参，且多次调用下相同入参始终返回相同的结果。
• 所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

5. State & 生命周期

• state：class组件私有属性，可以通过setState()来进行变更
• 生命周期函数：componentDidMount，componentWillUnmount

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
  // 组件已经被渲染到 DOM 中后运行
  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }
  // 组件被删除的时候运行
  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

使用setState注意点

• state的更新是合并的。
• state的更新可能是异步的，不要依赖this.state和this.props来更新下一个状态

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

6. 事件处理

React元素事件处理与传统HTML的区别

// 传统的HTML
<button onclick="activateLasers()">
  Activate Lasers
</button>
// React
<button onClick={activateLasers}>
  Activate Lasers
</button>

//阻止默认行为：在React中不能通过返回false的方式，必须显式使用preventDefault
//传统的HTML
<a href="#" onclick="console.log('The link was clicked.'); return false">
  Click me
</a>
// React
function ActionLink() {
  function handleClick(e) { //e 是一个合成事件
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

如何正确绑定事件

法一：直接在constructor上绑定这个事件

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    //法一： 为了在回调中使用 `this`，这个绑定是必不可少的，如果没有绑定，则在调用这个函数的时候this的值为undefined
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

  render() {
    return (
      // 法一：
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

法二：使用 class fields 正确的绑定回调函数

class LoggingButton extends React.Component {
  // 此语法确保 `handleClick` 内的 `this` 已被绑定。
  // 注意: 这是 \*实验性\* 语法。
  handleClick = () => { // 在此处使用了箭头函数
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

法三（在公司里最常用）：在回调中使用箭头函数。
此语法问题在于每次渲染 LoggingButton 时都会创建不同的回调函数。在大多数情况下，这没什么问题，但如果该回调函数作为 prop 传入子组件时，这些组件可能会进行额外的重新渲染。我们通常建议在构造器中绑定或使用 class fields 语法来避免这类性能问题。

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    // 此语法确保 `handleClick` 内的 `this` 已被绑定。
    return (
      // 使用箭头函数
      <button onClick={() => this.handleClick()}>
        Click me
      </button>
    );
  }
}

向事件传递参数

// 在这两种情况下，React 的事件对象 e 会被作为第二个参数传递。
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

7. 条件渲染

• if
• &&
• 三目运算符: condition ? true : false。

// if
function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}
// &&
render() {
  return (
    {unreadMessages.length > 0 && <h1>hhh</h1>}
   )
}
// 三目运算符
render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}

8. 列表 & Key

• key帮助React识别哪些元素改变了，比如被添加或删除。不是作为属性传递。
• key值需要在该数组中独一无二，一般选用元素的id，不建议使用索引来作为key值，因为项目的顺序可能发生变化，导致一些问题。
• 一个好的经验法则是：在map() 方法中的元素需要设置 key 属性。

function NumberList(props) {
  const numbers = props.numbers;
  // 使用map渲染一个列表，注意需要添加key
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

9. 表单

受控组件

• 受控组件：state是表单输入元素的唯一数据源，控制着用户输入过程中表单发生的操作。

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('提交的名字: ' + this.state.value);
    event.preventDefault(); // 阻止系统默认行为：提交表单后浏览新页面
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          名字:
          //input的数据展示来源于state，当输入内容改变时，也会更改state并展示出来，这就是受控组件
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="提交" />
      </form>
    );


### 文末

js前端的重头戏，值得花大部分时间学习。

![JavaScript知识](https://img-blog.csdnimg.cn/img_convert/701f4db8e7fc0c3ff4d87017d6c846be.png)

推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。

![前端电子书](https://img-blog.csdnimg.cn/img_convert/6065b7d33c9a5859971490467a967767.png)

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。



学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。

**这是288页的前端面试题**

![288页面试题](https://img-blog.csdnimg.cn/img_convert/6a0ed19303290ef201081fc6148f21db.png)