React基础知识精简全面推荐

坚强de土豆仔

已于 2024-07-25 22:33:16 修改

阅读量1.1k

点赞数 25

文章标签： react.js javascript 前端

于 2024-07-25 09:06:52 首次发布

本文链接：https://blog.csdn.net/weixin_43483590/article/details/140660294

版权

这篇博文主要对一些刚入门react框架的同学，以及对react基本知识进行巩固的，最后就是精简一下基本知识，以方便自己查看，感谢参考，有问题评论区交流，谢谢。

没有配置React的同学请参考：React 开发环境搭建超详细全面推荐-CSDN博客

1.JSX

const  element = <h1>Hello,world!</h1> ;

这是一段jsx代码，语法看起来很像html，实际上jsx语法所用的标签可以使用html标签，也可以使用自定义的react组件作为jsx中的标签。

jsx可以使用变量，name就是一个变量，注意：变量要用大括号括起来 { }

const  name = 'young';
const  element = <h1>Hello,{name}!</h1> ;

2.Props 和 State

这两个都是很重要的概念。react组件正常工作都需要依赖这两个组件，这两者都与react的状态有关系，两者的区别是 props是对外的，state是组件对内的接口。具体理解是

props是外部组件通过props将状态或者方法传递给当前组件来使用，所以props是父组件与子组件之间传递的接口；

state是组件内部的接口，用于维护组件内部的状态；

总之一句话 props是对外的，state是对内的。

3.组件生命周期

是react对外暴露出来的钩子函数，我们开发的时候可以在这些函数中定义一些逻辑，来实现业务功能逻辑。

这里分享几个常用的且比较重要的方法。

组件的挂载阶段：constructor（），render（），componentDidMount（）

组件的更新阶段：render（），componentDidUpdate（）

组件的卸载阶段：componentWillUnmount（）

4.列表和 Keys

渲染列表也是比较常用的，这里keys的值都是不相同的，为了保证当列表发生变化的时候react底层把key作为每一项的唯一标识。

const numbers = [ 1,2,3,4,5,6 ];
const listItems = numbers.map((number) = > \
    <li key={number.toString()} >
        {number}
    </li>
);

const todoItems = todos.map((todo) => 
    <li key = {todo.id}>
        {todo.text}
    </li>
);

5.事件处理

5.1事件处理是和用户。进行交互必不可少的。注意react中事件名 onClick 是驼峰的写法C大写的

html中事件

<button onclick="addUser()"> 
  add
</button>


React 中添加事件
<button onClick={addUser}> 
  add
</button>

5.2 事件this指向问题。在构建函数中有这一句 this.handleClick = this.handleClick.bind(this);

为这个handleClick绑定了 this ，这个this就是当前的组件，如果没有这一句话，this指向的是当前组件的event点击事件对象。

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

    handleClick() {
        this.setState(preState => ({
            isToggleOn: !preState.isToggleOn
        }));
    }
}
render(){
    return (
        <button onClick={this.handleClick}>
            {this.state.isToggleOn? 'ON':'OFF'}
        </button>
    )
}

此外还有es6的箭头函数同样也能实现这种效果，即上面的代码handleClick绑定this部分也能换成下面代码

handleClick = () => {
    console.log('this is:',this);
}

6.表单

我们可以通过使 React 的 state 成为 “单一数据源原则” 来结合这两个形式，然后渲染表单的 React 组件也可以控制在用户输入之后的行为。这种形式，其值由 React 控制的输入表单元素称为“受控组件”。

在使用表单组件的时候推荐使用组件受控的方式

下面的代码例子中input输入框中绑定onChange事件，当用户输入修改输入框内容，会触发onChange事件，事件处理拿到用户修改后的数据赋值给state.value的值，state发生变化，组件会重新被渲染，render方法重新被执行，input中的 value={this.state.value}重新设置成新的value值。

这样就保证了value的值是通过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('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

有了这些基础知识来新建一个自己的React项目吧 React如何搭建开发环境创建一个新项目：

React 开发环境搭建超详细全面推荐-CSDN博客