1.React组件
- function组件，
function Button() {
return ()
}
- class组件，来自ES6的class语法，
class Button extends React.Component{
constructor(){
super()
}
render(){
return()
}
}
2. 父子组件通信
- 父组件通过props给子组件传递数据，
- 子组件则是通过调用父组件传递给它的函数向父组件传递数据，调用时注意
bind(this)
3. Redux（主要用于父子组件之间的通信）
3.1 VanillaJS
- 根据state和action创建一个reducer
- 由reducer创建一个存放状态的store
- 需要更改数据时，通过store.dispatch一个action来进行更改。例如
store.dispatch({type: add},payload: 1) -
store.subscribe(render)监听store中state的变化，然后重新render
核心代码
<body>
<div>
你点击了 <span id="value">0</span> 次
<div>
<button onclick="add1()">+1</button>
<button onclick="minus()">-1</button>
<button onclick="addIfOdd()">如果是单数就+1</button>
<button onclick="addAsync()">1秒钟后+1</button>
</div>
</div>
<script>
function add1(){
store.dispatch({type: 'increase'})
}
function minus(){
store.dispatch({type: 'decrease'})
}
function addIfOdd(){
if (store.getState() %2 === 1){
store.dispatch({type: 'increase'})
}
}
function addAsync(){
setTimeout(()=>{
store.dispatch({type:'increase'})
},1000)
}
function reducer(state,action){
if (state === undefined){
return 0
}
switch(action.type){
case 'increase' :
return state + 1;
case 'decrease':
return state - 1;
default:
return state;
}
}
store = Redux.createStore(reducer)
const render = function(){
document.querySelector('#value').innerHTML = store.getState()
}
render()
store.subscribe(render)
</script>
</body>
</html>
3.2 React+Redux
- 代码结构和原生js的redux1-2-3-4差不多
- 增加了react父子组件之间的通信
3.3 React-redux
- 父组件中创建store,用
<Provider store={store}></Provider>包裹子组件
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
- mapStateToProps,mapDispatchToProps两个函数将Provider传入的store接收，导出子组件时用connect函数，使得子组件的props接收state和dispatch。
- 不需要subscribe(render)了
import React, { Component } from 'react';
import { connect } from "react-redux";
class App extends Component {
add1IfOdd(){
if(this.props.n %2 === 1){
this.props.add1()
}
}
render() {
return (
<div>
你点击了 <span id="value">{this.props.n}</span> 次
<div>
<button id="add1" onClick={()=> this.props.add1()}>+1</button>
<button id="add2" onClick={()=> this.props.add2()}>+2</button>
<button id="add1IfOdd" onClick={()=>{this.add1IfOdd()}}>如果是单数就+1</button>
<button id="add1After2Sec">两秒钟后+1</button>
</div>
</div>
);
}
}
function mapStateToProps(state){
return {
n: state.n
}
}
function mapDispatchToProps(dispatch) {
return {
add1: ()=> dispatch({type:'add', payload: 1}),
add2: ()=> dispatch({type: 'add',payload: 2})
}
}
export default connect(mapStateToProps,mapDispatchToProps)(App);
4. Context API 的使用
主要应用于不同层级的组件需要访问同样的数据，使用context可以避免通过中间元素传递props。
// Context 可以让我们无须明确地传遍每一个组件，就能将值深入传递进组件树。
// 为当前的 theme 创建一个 context（“light”为默认值）。
const ThemeContext = React.createContext('light');
class App extends React.Component {
render() {
// 使用一个 Provider 来将当前的 theme 传递给以下的组件树。
// 无论多深，任何组件都能读取这个值。
// 在这个例子中，我们将 “dark” 作为当前的值传递下去。
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
}
// 中间的组件再也不必指明往下传递 theme 了。
function Toolbar(props) {
return (
<div>
<ThemedButton />
</div>
);
}
class ThemedButton extends React.Component {
// 指定 contextType 读取当前的 theme context。
// React 会往上找到最近的 theme Provider，然后使用它的值。
// 在这个例子中，当前的 theme 值为 “dark”。
static contextType = ThemeContext;
render() {
return <Button theme={this.context} />;
}
}
5. Hooks API 的使用
Hook 是 React 16.8 的新增特性。它可以让你在不使用 class 组件的情况下使用 state 以及其他的 React 特性。
-
useState
-
useEffect
当你调用 useEffect 时，就是在告诉 React 在完成对 DOM 的更改后运行你的“副作用”函数。由于副作用函数是在组件内声明的，所以它们可以访问到组件的 props 和 state。默认情况下，React 会在每次渲染后调用副作用函数 —— 包括第一次渲染的时候。
6. React Router
核心代码
ReactDOM.render(
<Router>
<div>
<div>
<Link to="/">
<button>首页</button>
</Link>{" "}
|<Link to="/login">登录</Link> |<Link to="/signup">注册</Link> |
<Link to="/welcome">欢迎</Link>
</div>
<Route path="/" exact component={App} />
<Route path="/login" component={Box2} />
<Route path="/signup" component={Box1} />
<Route path="/welcome" component={Welcome} />
</div>
</Router>,
rootElement
);
7. React的生命周期
查阅文档
常见面试题目见笔记。
8. CSS in React
- 传统css 方式，注意class的命名
- css in js
1.styled-components https://codesandbox.io/s/rjr43532wo
2.emotion
3.css modules
普通应用使用 styled-components 和 css modules，因为类名会变成随机字符串,
库使用传统 CSS 方式，因为类名不会变成随机字符串。
网友评论