React|fcc教程整理

小猫学习中
137 阅读6分钟

前言

在fcc的网站上跟着教程打了一遍，fcc对于学习基础很不错，以下是根据fcc的react课程做的一些笔记，代码内容均来自fcc课程，是本人在学习过程中梳理自己用的笔记，仅供参考，网站会贴在最后。

定义和创建

  • const 常量 =（内容）

  • 在 JSX 中定义一个 HTML Class ：

    <div className='myDiv'>

  • 创建无状态函数组件

    下面是一个无状态功能组件的示例，该组件在 JSX 中分配一个 HTML 的 class：

    <div>将有一个 customClass 的 CSS class。

    const DemoComponent = function() {
  return (
    <div className='customClass' />
  );
};

  • 简单函数组件

    const ChildComponent = () => {
  return (
    <div>
      <p>I am the child</p>
    </div>
  );
};

  • 创建React组件

    创建了一个ES6类Kitten 扩展了React.Component

    Kitten 类中定义了一个调用 super() 方法的 constructor,并将 props 传递给它们 *(super([arguments]) // 调用父类的构造函数)

    class Kitten extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <h1>Hi</h1>
    );
  }
}

  • 用组合方式创建一个React组件

    当 React 遇到一个自定义 HTML 标签引用另一个组件的时（如本例所示，组件名称包含在 < /> 中）

  • 创建一个有状态的组件

    this.state = {}

渲染HTML元素为DOM树

ReactDOM.render(componentToRender, targetNode)

第一个参数是要渲染的 React 元素或组件，第二个参数是组件将要渲染到的 DOM 节点。

ReactDOM.render(JSX, document.getElementById("challenge-node"));

上述代码将JSX 渲染到 id='challenge-node'的 div 中

将class组件渲染到DOM树时，JSX变为React组件（< />)

Props

将 Props 传递给无状态函数组件

可以把创建的 React 支持的自定义 HTML 属性传递给组件。

设有一个 App 组件，该组件渲染了一个名为 Welcome 的子组件，它是一个无状态函数组件。 可以通过以下方式给 Welcome 传递一个 user 属性：

<App>
  <Welcome user='Mark' />
</App>

将创建的属性 user 传递给组件 Welcome。由于 Welcome 是一个无状态函数组件，它可以像这样访问该值：

const Welcome = (props) => <h1>Hello, {props.user}!</h1>

要将 prop 的值视为 JavaScript，必须将它们括在花括号中，例如date={Date()}。

传递一个数组作为Props

访问属性时可以使用 等数组方法。task join()

const List = (props) => {
  return <p>{props.tasks.join(", ")}</p>
};

要将数组传递给 JSX 元素，必须将其视为 JavaScript 并用花括号括起来。

 <List tasks={["Walk", "Cook", "Bake"]}/>
使用默认的Props

即定义一个 location 属性，并且其值在没有另行制定的情况下被设置为字符串 San Francisco。

设置其 defaultProps 

MyComponent.defaultProps = { location: 'San Francisco' }

Items.defaultProps = {
  quantity: 0
};
覆盖默认的Props
return <Items quantity={10 }/>
使用 PropTypes 来定义 Props 的类型

当提前知道 prop 的类型时，最佳实践是设置其 propTypes。 可以为组件定义 propTypes 属性，添加 isRequired，告诉 React handleClick 是该组件的必需属性。

Items.propTypes= {
  quantity: PropTypes.number.isRequired
};
使用 this.props 访问 Props

在父组件中定义，在子组件中用{this.props.}调用

State

在用户界面渲染状态
 <h1>{this.state.name}</h1>

或定义一个常量，并将其设置成组件中的某个值，在return中用花括号内加这个常量

用 this.setState 设置状态
this.setState()；
将this绑定到Class方法上

在构造函数中显式地绑定 this

bind函数是创建一个新函数，称为绑定函数，将调用绑定函数的函数绑定到bind的第一个参数上，此处将this绑定到Class方法上。

this.handleClick = this.handleClick.bind(this);

向 render 方法中的 button 元素添加一个单击处理程序。

 <button onClick = {this.handleClick}>Click Me</button>
使用State切换元素

  1. 将this关键字绑定到方法上

    this.toggleVisibility =this.toggleVisibility .bind(this);

  2. 定义此方法

    toggleVisibility (){
  this.setState(state=>{
    if(state.visibility===true){
       return { visibility: false };
    }else{
       return { visibility: true };
    }
  });
}

  3. 在render的按钮上触发方法

    render() {
    if (this.state.visibility) {
      return (
        <div>
          <button onClick={this.toggleVisibility}>Click Me</button>
          <h1>Now you see me!</h1>
        </div>
      );
    } else {
      return (
        <div>
          <button onClick={this.toggleVisibility}>Click Me</button>
        </div>
      );
    }
  }
    将 State 作为 Props 传递给子组件
      <Navbar name={this.state.name}/>

     <h1>Hello, my name is:{this.props.name} </h1>

使用生命周期方法

componentWillMount（）

当组件被挂载到 DOM 时，componentWillMount() 方法在 render() 方法之前被调用。 在 componentWillMount() 中将一些内容记录到控制台 -- 可能需要打开浏览器控制台以查看输出

在 componentWillMount 中调用 console.log：

 componentWillMount() {
  console.log('Component being mounted');
  }
componentDidMount（）

componentDidMount() 中有一个模拟 API 调用。 它在 2.5 秒后设置 state，以模拟调用服务器检索数据。

用 componentDidMount 中的延时函数来更新。

 componentDidMount() {
    setTimeout(() => {
      this.setState({
        activeUsers: 1273
      });
    }, 2500);
  }
添加事件侦听器

componentDidMount() 方法也是添加特定功能所需的任何事件监听器的最佳位置。 React 提供了一个合成事件系统，它封装了浏览器中的事件系统。

在 componentDidMount() 方法中为 keydown 事件添加事件监听器，并让这些事件触发回调 handleKeyPress()。

 componentDidMount() {
   document.addEventListener("keydown", this.handleKeyPress);
  }

在 componentWillUnmount() 中移除相同的事件监听器。 可以把相同的参数传递给 document.removeEventListener()。

 componentWillUnmount() {
document.removeEventListener("keydown", this.handleKeyPress);
  }

在卸载和销毁 React 组件之前，最好在这个生命周期方法中对它们进行清理。 移除事件监听器就是这样一个清理操作的例子。

使用 shouldComponentUpdate 优化重新渲染

React 提供了一种生命周期方法，当子组件接收到新的 state 或 props 时，可以调用该方法，并特别声明组件是否应该更新。

shouldComponentUpdate()，它将 nextProps 和 nextState 作为参数。默认接收到新的 props 时，即使 props 没有改变，它也会重新渲染。

通过优化重新渲染，当比较props（this.props）和下一个 props（nextProps），返回布尔值告诉React组件返回一个 boolean（布尔值），该值告诉 React 是否更新组件。

只有在 nextProps.value 为偶数时，OnlyEvens 才会重新渲染。

  if (nextProps.value % 2 == 0) {
        return true;
      }
      return false;

介绍内联样式

内联样式

JSX 元素使用 style 属性，但是鉴于 JSX 的编译方式，不能将值设置为 string（字符串）。 相反，你应该将其设置为等于 JavaScript object 。

属性使用,某些 CSS 样式属性的名称使用驼峰式命名。

驼峰拼写 fontSize 属性值直接写数字不加pxfontSize:16（html：font-size:12px)

<div style={{color: "yellow", fontSize: 16}}>Mellow Yellow</div>
设置style属性
const styles={
  color:"purple",
  fontSize:40,
  border:"2px solid purple",
};
在 React Render 方法中使用 JavaScript

在 render 方法中编写 JavaScript，可以把 JavaScript 直接放在 return 语句之前，如果之后想在 return 语句中的 JSX 代码里面使用变量时，可以将变量名放在大括号中。

使用 Array.map() 动态渲染元素

通常在响应式编程中，程序员在应用程序运行时之前无法知道其 state，需要组件来渲染未知数量的元素，用 Array.map()

const items = this.state.toDoList.map(i => <li>{i}</li>)

给同级元素一个唯一的键属性

创建元素数组时，每个元素都需要一个设置为唯一值的 key 属性。 React 使用这些键来跟踪哪些项目被添加、更改或删除。 这有助于在以任何方式修改列表时提高重新渲染过程的效率。

const renderFrameworks = frontEndFrameworks.map((item) =>
  <li key={item}>{item}</li>
);

使用 Array.Filter() 动态过滤数组

map 数组方法是一个强大的工具，在使用 React 时经常使用。 与 map 相关的另一种方法是 filter，它根据条件过滤数组的内容，然后返回一个新数组。 例如，如果有一个 users 数组，每个数组元素都有一个可以设置为 true 或 false 的 online 属性，可以这样只过滤那些在线的用户

let onlineUsers = users.filter(user => user.online);

用 renderToString 在服务器上渲染 React

需要在服务器上渲染一个 React 组件时，React 是一个 JavaScript 视图库，所以通常使用 Node 让 JavaScript 运行在服务器上，为此React 提供了renderToString() 方法。

renderToString() 方法由 ReactDOMServer 提供，在这里已定义成全局变量。 这个方法接收一个 React 元素作为参数。 用它来把 App 渲染成字符串。

ReactDOMServer.renderToString(<App />);

网站链接

前端开发库 认证 | freeCodeCamp.org

avatar
文章
阅读
粉丝