react学习总结

最新推荐文章于 2021-06-23 22:17:15 发布

原创最新推荐文章于 2021-06-23 22:17:15 发布 · 335 阅读

0 ·

CC 4.0 BY-SA版权

培训专栏收录该内容

41 篇文章

订阅专栏

本文总结了React开发中的关键知识点，包括通过CDN引入React的注意事项，JSX的使用，组件的两种形式，组件生命周期方法，状态更新的处理，事件处理，表单管理，代码分割，以及错误边界等。此外，还探讨了如何通过状态提升和context实现组件间数据共享，以及控制反转的组件设计策略。

1.如果通过CDN方式引入React，建议设置crossorigin属性，可以有更好的错误处理体验

<script crossorigin src="..."></script>

2.JSX可以防注入攻击

3.JSX就是用<></>或</>来代表元素，底层其实也是调用了createElement

4.大多数 React 应用只会调用一次 ReactDOM.render()

5.组件有两种形式：函数组件和class组件

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

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

6.组件名称必须以大写字母开头

7.当有多个原生标签组合时，可以进行组件提取

8.componentDidMount() 方法会在第一次组件已经被渲染到 DOM 中后运行

9.State 的更新可能是异步的，不要依赖他们的值来更新下一个状态，正确的做法如下:

this.setState(function(preState, preProps) {
  return {
    counter: preState.counter + preProps.increment
  };
});

this.setState((preState,preProps)=>({
	counter:preState.counter+preProps.increment
}))

10.浅合并就是只更新state某一些属性的值，没被更新的属性的值保持原样

11.React 事件的命名采用小驼峰式（camelCase）

12.对于一些自定义的函数，如果要使用到this的话，需要进行绑定，通常是在class中的constructor中进行，如：

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

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

这是保证函数中用到的this是组件的this，而不是函数的this

13.在 JSX 中嵌入任何表达式

14.直接返回null可以阻止渲染，隐藏组件

15.map用来展示数据集合，如：

const listItems = numbers.map((number) =>  <li>{number}</li>);

如果不加key属性，会出现警告，key是用来标记元素的，不是全局唯一，但是组件内唯一的，通常与map连用

const listItems = numbers.map((number) =>  <li key={number.toString()}>{number}</li>);

key属性的值不能靠props传递给子组件，如果要传递key属性的值，自己定义一个属性来传递

16.表单内的受控组件的值改变时，都要用绑定相应的事件方法来执行setState更改状态的属性值，如：

<input type="text" value={this.state.value} onChange={this.handleChange} />
handleChange(event) {    this.setState({value: event.target.value});  }

17.状态提升通过把state提取到父组件，将父组件的state值通过props传递到子组件中，可以让几个子组件共享state存放的值，
子组件触发事件方法可以调用父组件的方法，改变父组件的state，重新渲染子组件

18.通过ref创建DOM节点的引用，在组件的其他地方可以获取该DOM节点

this.textInput = React.createRef();一般在构造函数中创建ref
<input type="text" ref={this.textInput}/>
this.textInput.current获取DOM节点

19.通过export和import组件进行代码分割，前提是配置了webpack

20.通过context可以创建一些组件共享的数据，不必通过props一层一层传递

const ThemeContext = React.createContext('light');创建context，默认值为light
<ThemeContext.Provider value="dark">
    ...
</ThemeContext.Provider>

使用一个 Provider 来将当前的 "dark" 传递给以下的组件树

<Button theme={this.context} />后面的组件可以通过{this.context}引用 "dark"

21.对组件进行控制反转。一般来说，props传递的都是数据，但当有多层组件时，中间的某一层添加一个props，就要
往顶层一层一层添加props，非常麻烦，有一个方法是将整个组件作为props的数据传递，如：

const userLink = (
  <Link href={user.permalink}>
    <Avatar user={user} size={props.avatarSize} />
  </Link>
);
return <PageLayout userLink={userLink} />;

通过{props.userLink}获取

减少了在应用中要传递的 props 数量

22.需要在事件处理器内部(JavaScript函数内部)捕获错误使用try...catch，在声明式组件中捕获错误使用<ErrorBoundary></ErrorBoundary>